Vue3 和 Vue2

[dave-wind]

区别

1.以前vue2 是选项式 要引用一个响应式 要不整个vue引入; 现在组合api 可以单独引入 比如 直接 引用 reactive包
2.打包方面: 以前vue2 很多带的方法 比如 nexttick keep-alive 全局组件 都会打包进去; vue3 采用按需倒入 treeshaking那种
3. vue3还可以自定义渲染器 
4. vue3 依旧是声明式, 不需要去关心内部一下api实现, 整个渲染逻辑交给vue去做

ref 和 reactive

vue3 ref 和 reactive 区别
ref  一般用来处理 响应式非引用类型, 也可以传对象; 如果是对象 内部借用的也是 reactive去实现响应式
reactive就是 定义对象的 深度key都可以做到响应式; 而且只能传入对象; 因为proxy只支持 对象格式

effect

// 默认会执行一次; 然后响应式数据变了 就又会重新执行
effect(()=>{
})

proxy 配合 Reflect的作用

var person = {
alias: 'dave',
get name() {
return this.alias + 'wind'
}
};

var proxy = new Proxy(person, { get(target, key, receiver) { // console.log("记录属性使用哪个effect----", key) // return target[key] return Reflect.get(target, key, receiver); // receiver 代表proxy 可以改变属性this指向 }, set(target, key, value, receiver) { console.log("通知effect重新执行----") // target[key] = value return Reflect.set(target, key, value, receiver) } });

proxy.name; // 这样就可以 劫持到 name 和 alias