2.0-3.0

209 阅读2分钟

1.3.0在安装脚手架同时提前安装好一些项目开发必备的插件,提供了可视化创建脚手架,方便对插件和依赖进行管理和配置。两个版本的目录结构也有些许差别。

2.两个版本,他们的区别很大,包括渲染方式,数据监听,双向绑定,生命周期。3.0更精准变通。

双向绑定:

1.2.0利用了ES5的一个API,Object.definePropert()对数据进行劫持-结合-发布订阅模式的方式实现。

2.3.0使用ES6的ProxyAPI对数据代理,通过reactive()函数给每一个对象都包一层Proxy,通过Proxy监听属性的变化,从而实现对数据的监控。

proxy优势

1.defineProperty只能监听某个属性,不能对全对象监听,可以省去for in 闭包等内容来提升效率(直接绑定整个对象即可)

2.可以监听数组,不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作。完美支持对数组的监听

3.另外3.0增加了一些内置组件和方法,可以默认进行懒观察,使用Function-basedAPI,setup函数,对与插件活对象的一个按需引入,C莫普特的V安略,新假日了TypeScript以及PWA的支持等等,按需引入

2.0所有东西斗争vue对象上,没用都会跑一边,这提升了性能的消耗,增加了用户的加载时间。 3.0可以用ES module imports按需引入:如keep-alive内置组件,v-model指令等等,减少内存消耗,减少用户加载时间,优化用户体验。

核心代码:

createApp(APP).mount('#app') = createApp(根组件).mount('public/index.vue中的div容器')

3.0 image.png

vs

2.0 image.png

image.png

生命周期

image.png

获取props 2.0:console.log('props',this.xxx) 3.0:setup(props,context){console.log('props',props)}

给父组件传值 2.0:this.$emit() 3.0:setup(props,context){context.emit()}