Vue3.0和vue2的区别详解_vue3什么时候发布的

作者：Gausst松鼠会 | 2024-04-05 12:59:46

踩

vue3什么时候发布的

vue3发布于2020年9月18号

一.vue3和 vue2的区别

1.vue3.x性能上有很大提升

2.打包减少了41%

3.初次渲染相比vue2快了55%，更新快了13%

4.内存使用减少了54%

5..使用了组合（composition）api 代替了vue2得选项（option）api

6.vue3比vue2代码更容易维护

7.响应式原理不同

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使用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可以劫持整个对象，并返回一个新对象

8.vue3的源码使用了typescript进行了重构更好的支持ts

9.vue3真正的实现了按需导入

10.vue3兼容vue2的所有语法

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/365708