Vue2.0和Vue3.0的区别 #69
Description
1、v-if和v-for优先级
在 vue 2.x 中，在一个元素上同时使用v-if和v-for时，v-for会优先作用。
在 vue 3.x 中，v-if总是优先于v-for生效。
2、体积更小
全局和内部 API 已经被重构为可tree-shakable，通过webpack的tree-shaking功能，可以将无用模块去掉。
任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。
3、diff算法优化
vue3在diff算法中相比vue2增加了静态标记。
关于这个静态标记，其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较
<span>你好</span> // 这是静态的，diff过程中不会再比较
<div>{{ message }}</div> //这是动态的，直接比较动态的
4、静态提升
Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用这样就免去了重复的创建节点
<span>你好</span>
<div>{{ message }}</div>
没有做静态提升之前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode("span", null, "你好"),
_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */))
}
做了静态提升之后
const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "你好", -1 /* HOISTED */)
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock(_Fragment, null, [
_hoisted_1,
_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)
], 64 /* STABLE_FRAGMENT */))
}
// Check the console for the AST
静态内容_hoisted_1被放置在render函数外，每次渲染的时候只要取_hoisted_1即可，同时_hoisted_1被打上了PatchFlag，静态标记值为-1，特殊标志是负整数表示永远不会用于Diff
5、支持TypeScript
6、 Vue2.x 用的是 Options Api ，Vue3.0 用的是 Composition Api
7、proxy代替defineProperty
Object.defineProperty()语法
重点：vue为什么对数组对象的深层监听无法实现，因为组件每次渲染都是将data里的数据通过defineProperty进行响应式或者双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲染
Object.defineProperty( Obj, 'name', {
enumerable: true, //可枚举
configurable: true, //可配置
// writable:true, //跟可配置不能同时存在
// value:'name', //可写死直
get: function () {
return def
},
set: function ( val ) {
def = val
}
} )
Proxy的语法
//两个参数，对象，13个配置项
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37;
},
set:function(){ },
...13个配置项
};
const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37
对比代码可得，defineProperty只能响应首次渲染时候的属性，Proxy需要的是整体，不需要关心里面有什么属性，而且Proxy的配置项有13种，可以做更细致的事情，这是之前的defineProperty无法达到的
两者兼容性
vue2.x之所以只能兼容到IE8就是因为defineProperty无法兼容IE8，其他浏览器也会存在轻微兼容问题proxy的话除了IE，其他浏览器都兼容，这次vue3还是使用了它，说明vue3直接放弃了IE的兼容考虑