vue3学习笔记分享

首先说一下
1、vue2和vue3的双向数据绑定原理的区别：

• vue2使用的是es5的Object.defineProperty来实现的，把对象传入vue实例中，vue会遍历该对象的所有property，使用Object.defineProperty把这些property转为getter/setter，缺点是：①对于对象， 无法检测 property 的添加或移除；②对于数组，不能检测到修改数组长度时和利用索引直接设置一个数组项时的变动。
• vue3使用的是es6的Proxy方法，解决了vue2的一些双向数据绑定的缺点，但是Proxy也有兼容性的问题。

2、vue2使用的optionsAPI和vue3使用的composition API的区别：

• vue2的optionsAPI是每个选项都有固定的位置书写，比如数据写data里，方法写methods里，会比较乱，代码多的时候找起来也不方便
• vue3的composition API是把一些选项放在一起写，都在setup()里写，方便找和维护，如果有某些方法是一直会用到也可以单独写出来，之后用到直接调用就可以了，相对来说会很清晰。

一、reactive和ref

• reactive是一个函数，能实现数据响应式，reactive的参数必须是对象，复杂数据类型，基本数据类型只会渲染最初值，更改数值页面不会更改；传入数组会转成Proxy对象。
  
• ref是一个函数，参数不仅可以是复杂数据类型也可以是基本数据类型，在setup中使用ref的数据需要加.value。
  

二、toRefs

因为用reactive返回的对象，想要解构放在return里面直接解构会出现不响应的情况，这个时候我们需要用到toRefs，通过...toRefs(obj) 此时可以把reactive里的每个属性变成ref对象，就会依然有响应式特性，可以在模板中直接使用属性访问数据，不需要带对象名了。

三、props和emit

setup函数中子组件通过函数的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值中的emit。
子组件：

父组件：

四、computed

是响应式计算，当依赖数据改变会重新计算求值，但是computed是依靠缓存，不会每次都调用，会节省性能,computedList调用三次但是只打印一次，filterList（）却打印两次，说明computed是利用缓存。

五、watch

引入watch，在setup里面直接使用，调用方式是回调函数的方式，有三个参数，第一个是需要监听的对象，第二个是监听对象的回调，第三个是监听的配置项。vue3可以监听多个watch。

六、生命周期

生命周期的钩子要在setup()函数里面进行使用，使用的时候需要引入。