你准备好迎接vue3.0了吗

前言

本月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>
​
​
<script>
import {ref, reactive, toRefs} from '@vue/composition-api'
export default {
  setup(){
    let singleVal = 1
    const doubleVal = ref(1)
    const state = reactive({
      stateVal: 1
    })
    const methods = {
      clicksingleVal(){
        singleVal++
        console.log(singleVal);
      },
      clickdoubleVal(){
        doubleVal.value++
      },
      clickstateVal(){
        state.stateVal++
      },
    }
    return{
      singleVal,
      doubleVal,
      ...toRefs(state),
      ...methods
    }
  }
}
</script>
<style>
</style>

如果你是第一次看到上面的写法可能会有点陌生，这就是在vue3.x中的写法。在v2.x中的data、methods、computed、watch等内容，在v3.x中全部都写在一个叫 setup 的函数中。在里面我们可以任意的定义变量、函数等，最后通过return返回，返回的内容可以在模板中进行使用。