文库网
关注排行榜

当前无数据...

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

前言

本月21号晚上看了尤大大的直播,感觉vue3.0离我们越来越近了,预计年中正式发布,3.0的改变的确很大,性能提升了很多,很多东西也在靠向react。为了到时可以很快的转入vue3.0的阵营,从现在开始熟悉新的特性是很有必要的。
如果你想在v2.x中使用3.0的内容,可通过以下方式

  1. <code class="prism language-JavaScript">npm install '@vue/composition-api'
  2. </code>
复制代码

在main.js中引入

  1. <code class="prism language-JavaScript">import VueCompositionApi from '@vue/composition-api';
  2. Vue.use(VueCompositionApi);
  3. </code>
复制代码

数据的双向绑定

V2.x中的数据双向绑定是通过object的defineProperty方法实现的,通过属性中的get和set方法中进行拦截操作。但是它无法监听数组的改变,除了使用以下几种方法可以:push()、pop()、shift()、unshift()、splice()、sort()、reverse(),如果直接使用index设置数组的某一项时是无法改变的。
V3.x中改用了proxy和Reflect实现双向绑定,它可以从更多方面对对象的变化进行监听,除了set 和 get 外,还提供了apply、setPrototypeOf、getPrototypeOf、deletePrototype、isExtensible、preventExtensions、getOwnPropertyDescriptor 、defineProperty、has、ownKeys、construct方法的监听。
对于proxy的实际应用我将在后期专门来讲解,本期以VU3.0的实践为主
直接上一斤的例子

  1. <code class="prism language-JavaScript"><template>
  2. <div>
  3. <h3>数据绑定</h3>
  4. <div>
  5. <el-button @click="clicksingleVal">
  6. 单向绑定 {{singleVal}}
  7. </el-button>
  8. <el-button @click="clickdoubleVal">
  9. 双向绑定 {{doubleVal}}
  10. </el-button>
  11. <el-button @click="clickstateVal">
  12. 状态绑定 {{stateVal}}
  13. </el-button>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import {ref, reactive, toRefs} from '@vue/composition-api'
  19. export default {
  20. setup(){
  21. let singleVal = 1
  22. const doubleVal = ref(1)
  23. const state = reactive({
  24. stateVal: 1
  25. })
  26. const methods = {
  27. clicksingleVal(){
  28. singleVal++
  29. console.log(singleVal);
  30. },
  31. clickdoubleVal(){
  32. doubleVal.value++
  33. },
  34. clickstateVal(){
  35. state.stateVal++
  36. },
  37. }
  38. return{
  39. singleVal,
  40. doubleVal,
  41. ...toRefs(state),
  42. ...methods
  43. }
  44. }
  45. }
  46. </script>
  47. <style>
  48. </style>
  49. </code>
复制代码

如果你是第一次看到上面的写法可能会有点陌生,这就是在vue3.x中的写法。在v2.x中的data、methods、computed、watch等内容,在v3.x中全部都写在一个叫 setup 的函数中。在里面我们可以任意的定义变量、函数等,最后通过return返回,返回的内容可以在模板中进行使用。
对于绑定的数据在v3.x中进行了更加详细的分类,可以分为以下三种:

  • 单向绑定:var singleVal = 1,数据会变化,但是视图不会更新
  • 单个双向绑定:const doubleVal = ref(1),使用 doubleVal.value 改变
  • 双向绑定:需要使用 reactive ,使用 state.stateVal 改变值

我们来逐个的进行讲解:

  • 单向绑定,听名字就可以知道它并不具有双向绑定的特性或功能,它只会在视图初始化时绑定一次,这个变量即使后面发生了改变,视图也不会更新。可以从控制台看到singleVal 的值的确发生了变化,但界面中始终显示的为1。变量声明的方法和我们平时声明一个变量一样,如:let singleVal = 1,最后在return中返回。
  • 单个双向绑定,每次只能声明一个双向绑定的变量,通过ref函数创建一个包装对象,使它包含一个响应式的属性value。例如上面的const doubleVal = ref(1)。如果要改变它的值,需要改变的是它的属性value上的值,像这样一样doubleVal.value++。
  • 双向绑定,通过reactive创建一个响应式的对象,这样创建的对象并不是一个包装对象,因此不需要使用.value来取值,它等价于 Vue 2.x 的Vue.observable。
    {tilte}-wx_O75CFTT9
  1. <code class="prism language-JavaScript">const state = reactive({
  2. stateVal: 1
  3. })
  4. return {
  5. ...state
  6. }
  7. </code>
复制代码

对reactive的内容直接进行解构后返回,会导致响应式丢失,需要使用toRefs将reactive对象转为普通对象,这样结果对象上的每个属性都指向原始对象中对应属性的ref引用对象,保证了在使用对象解构或拓展运算符时响应式不会丢失。
对于事件方法,就和声明一个变量一样,在setup中声明,在return返回即可。

计算属性

引入computed方法,返回计算后的值,这里接着使用上面的例子,用total计算上面3个数的总和。

  1. <code class="prism language-JavaScript">import {computed, ref, reactive, toRefs} from '@vue/composition-api'
  2. export default {
  3. setup(){
  4. ...
  5. const total = computed(() =>{
  6. return singleVal + doubleVal.value + state.stateVal
  7. })
  8. ...
  9. return{
  10. ...,
  11. total
  12. }
  13. }
  14. }
  15. </code>
复制代码

{tilte}-wx_O75CFTT9

从演示效果中我们还可以看出一点,单向绑定的数据改变不会触发计算属性方法

数据监听

同样还是写在setup中,也比较简单,没有什么可讲解的

  1. <code class="prism language-JavaScript">import {computed, ref, reactive, toRefs, watch} from '@vue/composition-api'
  2. ...
  3. watch(() => state.stateVal, (newVal, oldVal ) =>{
  4. console.log(newVal, oldVal);
  5. })
  6. ...
  7. </code>
复制代码

{tilte}-wx_O75CFTT9

生命周期

vue3.0中取消了 beforeCreate 和 created 两个周期,因为setup会在这个这个周期前执行,因此你可以在setup中进行你需要的处理。其他的生命周期全部以on开头。

  1. <code class="prism language-JavaScript">import {
  2. onBeforeMount,
  3. onMounted,
  4. onBeforeUnmount,
  5. onBeforeUpdate,
  6. onDeactivated,
  7. onUnmounted,
  8. onUpdated
  9. } from '@vue/composition-api'
  10. export default {
  11. setup(){
  12. onBeforeMount(() =>{
  13. console.log('onBeforeMount');
  14. })
  15. onMounted(() =>{
  16. console.log('onMounted');
  17. })
  18. onBeforeUnmount(() =>{
  19. console.log('onBeforeUnmount');
  20. })
  21. onBeforeUpdate(() =>{
  22. console.log('onBeforeUpdate');
  23. })
  24. onDeactivated(() =>{
  25. console.log('onDeactivated');
  26. })
  27. onUnmounted(() =>{
  28. console.log('onUnmounted');
  29. })
  30. onUpdated(() =>{
  31. console.log('onUpdated');
  32. })
  33. }
  34. }
  35. </code>
复制代码

Mixin

vue3.0中使用函数式的API代替原有的mixin,mixin很容易引起命名重合和覆盖引入mixin的页面属性。

在vue3.0中以一个API的形式存在,当你需要时,将其引入。直接看例子

mixin.vue

  1. <code class="prism language-JavaScript"><template>
  2. <div>
  3. <h3>mixins</h3>
  4. <div>
  5. <el-input v-model="searchValue" type="text" @change="onSearch"/>
  6. <div>
  7. <ul>
  8. <li v-for="name in names" :key="name.id" v-show="name.show">
  9. {{name.value}}
  10. </li>
  11. </ul>
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import searchName from './searchName.js'
  18. export default {
  19. setup(){
  20. let list = [
  21. {id: 1, value: 'vue', show: true},
  22. {id: 2, value: 'react', show: true},
  23. {id: 3, value: 'angular', show: true},
  24. {id: 4, value: 'elementui', show: true},
  25. {id: 5, value: 'ant', show: true},
  26. {id: 6, value: 'javascript', show: true},
  27. {id: 7, value: 'css', show: true},
  28. ]
  29. var {onSearch, names, searchValue} = searchName(list)
  30. return {
  31. onSearch,
  32. names,
  33. searchValue
  34. }
  35. }
  36. }
  37. </script>
  38. <style>
  39. </style>
  40. </code>
复制代码

searchName.js

  1. <code class="prism language-JavaScript">import {reactive, toRefs} from '@vue/composition-api'
  2. export default function searchName(names){
  3. const state = reactive({
  4. names: names,
  5. searchValue: ''
  6. })
  7. const onSearch = () => {
  8. state.names.forEach(name => {
  9. name.show = name.value.includes(state.searchValue)
  10. })
  11. }
  12. return {
  13. ...toRefs(state),
  14. onSearch
  15. }
  16. }
  17. </code>
复制代码

上面我们将搜索功能独立到一个js文件中。在 searchName.js 中定义了一些属性和方法,这里的属性也是具有响应式的,最后返回这些内容。在组件中,先引入这个js文件,调用searchName方法,传入需要的参数。在该组件中的searchValue和names两个响应式数据并非自身的所有,而是来自searchName.js中,通过下面演示可以看到,他们的确也具有响应式的特性。

{tilte}-wx_O75CFTT9

EventBus

  • setup接收两个参数

  • props:等同于V2.x中的 props:{},用于接收父组件传递的参数

ctx:上下文环境。在2.x中的this指向的是全局VUE实例,可以使用this.routerthis.router、this.router、this.commit、this.emit3.0访thisthisundefinedctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this,如果你尝试输出this,你回看到它的值是undefined。但可以通过ctx.root.emit等方法进行路由的跳转等操作。而在3.0中不能直接访问到this,如果你尝试输出this,你回看到它的值是undefined。但可以通过ctx.root.root.$emit将内容挂在到 $root 上,以使得任何地方都可以访问到。

  1. <code class="prism language-JavaScript">setup(props, ctx){
  2. ...
  3. const total = computed(() =>{
  4. let total = singleVal + doubleVal.value + state.stateVal
  5. ctx.root.$root.$emit('handleClick', {number: total })
  6. return total
  7. })
  8. ...
  9. }
  10. ...
  11. ctx.root.$root.$on('handleClick', (val) =>{
  12. console.log('我是通过ctx.root.$root.$on触发的,接收的值为:' + val.number);
  13. state.otherTotal = val.number
  14. })
  15. ...
  16. </code>
复制代码

最后附上composition-api的github:https://github.com/vuejs/composition-api

我的网站www.dengzhanyong.com

{tilte}-wx_O75CFTT9


本站资源均由网上搜集或网友上传提供,内容仅供观摩学习交流之用,本站将不对任何资源负法律责任.如有侵犯您的版权,请及时联系我们(邮箱:892481490@qq.com,客服QQ:892481490),我们会尽快处理!QQ350550790是骗子,注意不要和他交易!!!
发帖求助前要善用【论坛搜索】功能, 那里可能会有你要找的答案,也能为你节约不少学习时间;
如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加(威望)和(贡献)而不会扣除自己的积分。
如发现灌水帖、病毒木马帖、广告帖、工具不能正常使用、网盘链接失效,请点击【举报】 核实有几率会给予额外的B币奖励哦!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    发布资源 快速回复 返回列表 客服中心 官方QQ群

    QQ|小黑屋|手机版|编程之家论坛 ( 桂ICP备18002029号 )

    Powered by 编程之家  © 20019-2021