目前3.0已经发布了,自己也尝试在2的基础上升级3版本项目,发现3确实变了好多,例如钩子函数就大量减少了。
那么原理也是有变化的
用过vue的人都知道 vue2.x实现双向数据绑定的原理是
利用
Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的,当数据发生改变发出通知。
在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。
属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。
这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的 get 和 set 就是属于存取描述符对象的属性。
然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。
用代码看看vue2.x的原理
<body>
<div>
<input type="text" id="input">
<span id="text"></span>
</div>
</body>
<script>
var obj = {};
Object.defineProperty(obj, 'prop', {
get: function () {
return val;
},
set: function (newVal) {
val = newVal;
document.getElementById('text').innerHTML = val;
}
});
document.addEventListener('keyup', function (e) {
obj.prop = e.target.value;
});
</script>
我们在浏览器里试试
你输入什么就出现什么
Vue 3.0使用ES6的新特性porxy
原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知
来看看代码的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="input">
<span id="text"></span>
</div>
</body>
</html>
<script>
var obj = {};
var newObj= new Proxy(obj, {
// target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
get: function (target, key, receive) {
// 返回该属性值
return target[key];
},
set: function (target, key, newVal, receive) {
// 执行赋值操作
target[key] = newVal;
document.getElementById('text').innerHTML = target[key];
}
})
document.addEventListener('keyup', function (e) {
newObj[0] = e.target.value;
});
</script>
相比于vue2.x,使用proxy的优势如下区别:
**
1、 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
2、 vue3.x可以监听到数组内部数据的变化,不用再去单独的对数组做特异性操作
3、 proxy可以劫持整个对象,并返回一个新对象
4、 Vue2.x版本中的双向绑定不能检测到下标的变化
5、 defineProperty只能监听某个属性,不能对全对象监听
**
另外
1、vue-cli2.0与3.0在目录结构方面,有明显的不同
2、 vue-cli3.0移除了配置文件目录,config 和 build 文件夹
3、同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中
4、3.0 中 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
5、没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变。
6、在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
请多指教,谢谢