vue3.0新特性体验

非常清楚的介绍：http://www.liulongbin.top:8085/#/

 

大致总结：

• 总的来说给我的第一映像就是有一点点像写react的感觉
• setup(props, this(上下文对象))

该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api写在setup()函数中

• 执行时机在beforecreate与created之间。vue3也是取消了这两个钩子，统一用setup代替
• 由于所有东西都得调用api写在setup中，这让我感觉有点像写react的感觉。
• 数据return出去，像过去data(){ return {} }一样

• reactive({})

该函数传入一个对象，里面的数据会变成响应式的数据。类似于react中的state，只不过state更新的时候不需要setState一遍了

• 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可

• ref()

ref也是创建响应式数据的，区别在于要用xxx.value才能访问到数据值，更推荐用ref，然后配合reactive使用

• 当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问

• toRefs()

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据

• computed()

该函数用来创造计算属性，和过去一样，它返回的值是一个ref对象。
里面可以传方法，或者一个对象，对象中包含set()、get()方法

• watch

支持传三个参数
- 想监听的数据，可以是数组形势，传入多个
- 监听数据的回调函数，该回调的参数有两个，前一个是newValue，后一个是oldValue，每一个都可以是一个数组，与之前的多个监听对应
- 监听的配置参数 是一个对象，如lazy：true，这样可以让初次挂在时不执行watch的回调

const state = reactive({ count: 0, name: 'zs' })
如果是reactive创建的数据，watch的第一个参数应该是() => state.count这种形式
const count = ref(0)
如果是ref创建的数据，那么直接传 count 即可

• 可以在watch的回调中用onCleanup(() => clearTimeout(timerId))
  清楚无用的异步操作，举个例子可以做防抖，你可以在回调里清除防抖的那个定时器

• 全新的生命周期函数 （只能在setup中使用）

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

• provide & inject

可以取代props，类似react，在父子传信的时候不用再一级一级的props了，只要父级provide了数据，无论嵌套多少层级的子组件，都可以在对应的子组件中inject获取数据

• ref

写在template上的ref，用法发生了一些变化，细节看文档

1 什么时候用到diff算法，diff算法作用域在哪里？

2 diff算法是怎么运作的，到底有什么作用？

3 在v-for 循环列表 key 的作用是什么

4 用索引index做key真的有用？ 到底用什么做key才是最佳方案。