1:vue3.0和2.0的区别
2.0数据双向绑定方面
Vue2.0使用Object.defineProperty
原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发生改变发出通知
// 数据
let data = {
title: '',
// 备份数据
_data: {}
}
// 定义特性
Object.defineProperty(data, 'title', {
// 定义特性属性或者特性方法
// 取值方法
get() {
// console.log('get')
// 注意:不能通过自身属性取值
// return this.title
// 返回备份的数据
return this._data.title;
},
// 赋值方法
set(value) {
// this指向对象
// 注意:不能为自身属性赋值
// this.title = value
// 我们可以向备份数据中存储
this._data.title = value;
// console.log('set')
// 更新视图
updateView(this._data)
}
})
// 视图模板
let tpl = document.getElementById('app').innerHTML
// 实现更新视图的方法
function updateView(data) {
// 处理模板
let html = tpl.replace(/{
{(w+)}}/g, (match, $1) => {
// 从data中获取数据
return data[$1] || ''
})
// 更新视图
document.getElementById('app').innerHTML = html;
}
Vue3.0数据绑定
使用ES6的新特性porxy
原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
<title>vue3.0数据双向绑定</title>
</head>
<body>
<div>
<input type="text" id="input">
<span id="text"></span>
</div>
</body>
</html>
<script>
var obj = {};
var obj1 = 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) {
obj1[0] = e.target.value;
});
</script>
总结:
Vue2.x版本中的双向绑定不能检测到下标的变化
proxy可以劫持整个对象,并返回一个新对象
2: 创建项目
未创建过vue脚手架得同学 或者从线上拉项目下来得同学 可以首先 查一下 当前版本
1:查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli4
vue --version
2:如果无法识别vue命令说明没有安装vue-cli,使用以下说明进行安装
安装3.0版本: 目前新项目搭建脚手架默认安装得是3.0版本
npm install -g vue-cli
如果是旧项目2.0版本到3.0切换得同学,即卸载当前版本,安装另外的版本
从2.0升级到3.0:
npm uninstall -g vue-cli