总结vue2.0与vue3.0的区别，让你快速上手

最新推荐文章于 2024-07-24 10:38:58 发布

m0_55070913

最新推荐文章于 2024-07-24 10:38:58 发布

阅读量1.4w

点赞数 7

分类专栏：前端 html 文章标签：爬虫 python 开发语言

本文链接：https://blog.csdn.net/m0_55070913/article/details/123321523

版权

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

最低0.47元/天解锁文章

m0_55070913

关注

7
点赞
踩
52

收藏

觉得还不错? 一键收藏
0
评论
总结vue2.0与vue3.0的区别，让你快速上手

1:vue3.0和2.0的区别2.0数据双向绑定方面Vue2.0使用Object.defineProperty原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知// 数据let data = { title: '', // 备份数据 _data: {}}// 定义特性Object.defineProperty(data, 'title', { // 定义特性属性或者特性方法 // 取值方法 g
复制链接

扫一扫

专栏目录