圆月山庄资源网 Design By www.vgjia.com

前言

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

npm install '@vue/composition-api'

在main.js中引入

import VueCompositionApi from '@vue/composition-api';
Vue.use(VueCompositionApi);

数据的双向绑定

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的实践为主

直接上一斤的例子

<template>
  <div>
    <h3>数据绑定</h3>
    <div>
      <el-button @click="clicksingleVal">
        单向绑定 {{singleVal}}
      </el-button>
      <el-button @click="clickdoubleVal">
        双向绑定 {{doubleVal}}
      </el-button>
      <el-button @click="clickstateVal">
        状态绑定 {{stateVal}}
      </el-button>
    </div>
  </div>
</template>
"text-align: center">你准备好迎接vue3.0了吗

const state = reactive({
  stateVal: 1
})
return {
 ...state
}

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

计算属性

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

import {computed, ref, reactive, toRefs} from '@vue/composition-api' 
export default {
  setup(){
    ...
    const total = computed(() =>{
      return singleVal + doubleVal.value + state.stateVal
    })
    ...
    return{
      ...,
      total
    }
  }
}

你准备好迎接vue3.0了吗

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

数据监听

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

import {computed, ref, reactive, toRefs, watch} from '@vue/composition-api'
...
watch(() => state.stateVal, (newVal, oldVal ) =>{
  console.log(newVal, oldVal);
})
...

你准备好迎接vue3.0了吗

生命周期

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

import {
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onBeforeUpdate,
  onDeactivated,
  onUnmounted,
  onUpdated
} from '@vue/composition-api'
export default {
  setup(){
    onBeforeMount(() =>{
      console.log('onBeforeMount');
    })
    onMounted(() =>{
      console.log('onMounted');
    })
    onBeforeUnmount(() =>{
      console.log('onBeforeUnmount');
    })
    onBeforeUpdate(() =>{
      console.log('onBeforeUpdate');
    })
    onDeactivated(() =>{
      console.log('onDeactivated');
    })
    onUnmounted(() =>{
      console.log('onUnmounted');
    })
    onUpdated(() =>{
      console.log('onUpdated');
    })
  }
}

Mixin

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

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

mixin.vue

<template>
  <div>
    <h3>mixins</h3>
    <div>
      <el-input v-model="searchValue" type="text" @change="onSearch"/>
      <div>
        <ul>
          <li v-for="name in names" :key="name.id" v-show="name.show">
            {{name.value}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
"htmlcode">
import {reactive, toRefs} from '@vue/composition-api'
"text-align: center">你准备好迎接vue3.0了吗

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 上,以使得任何地方都可以访问到。

setup(props, ctx){
 ...
 const total = computed(() =>{
   let total = singleVal + doubleVal.value + state.stateVal
   ctx.root.$root.$emit('handleClick', {number: total })
   return total 
 })
 ...
}
...
ctx.root.$root.$on('handleClick', (val) =>{
  console.log('我是通过ctx.root.$root.$on触发的,接收的值为:' + val.number);
  state.otherTotal = val.number
})
...

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

标签:
vue3.0

圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com