样式网站,海外推广服务,黑龙江建设教育信息网站首页,网站建设公司模板vue2和vue3的区别
前言
vue2升级vue3之后变得更快#xff0c;更轻#xff0c;协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化#xff0c;但是本质区别是什么#xff0c;下面分为几个部分进行讲解。vue2和vue3
对比vue2vue3脚手架命令式可视化创建脚…vue2和vue3的区别
前言
vue2升级vue3之后变得更快更轻协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化但是本质区别是什么下面分为几个部分进行讲解。vue2和vue3
对比vue2vue3脚手架命令式可视化创建脚⼿架组件通信见下文见下文数据监听watch,computedwatch,watchEffect,computed双向绑定Object.definePropertyProxyAPI⽣命周期见下文见下文api选项式组合式
一、双向绑定更新
vue2 的双向数据绑定是利⽤ES5 的⼀个 API Object.defineProperty()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。
vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理通过 reactive() 函数给每⼀个对象都包⼀层 Proxy通过 Proxy 监听属性的变化从⽽ 实现对数据的监控。
这⾥是相⽐于vue2版本使⽤proxy的优势如下
1.defineProperty只能监听某个属性不能对全对象监听 可以省去for in、闭包等内容来提升效率直接绑定整个对象即可
2.可以监听数组不⽤再去单独的对数组做特异步操作,通过Proxy可以直接拦截所有对象类型数据的操作完美⽀持对数组的监听。二、实例化
Vue2.x中new出的实例对象所有的东西都在这个vue对象上这样其实⽆论你⽤到还是没⽤到都会跑⼀遍这样不仅提⾼了性能消耗也⽆疑增加了⽤户加载时间。
⽽vue3.0中可以⽤ES module imports按需引⼊如keep-alive内置组件、v-model指令等等不仅我们开发起来更加的便捷减少 了内存消耗也同时减少了⽤户加载时间优化⽤户体验。
三、生命周期
vue2vue3描述beforeCreatesetup实例创建前createdsetup实例创建后beforeMountonBeforeMountDOM挂载前调用mountedonMountedDOM挂载完成调用beforeUpdateonBeforeUpdate数据更新前调用updatedonUpdated数据更新后调用beforeDestoryonBeforeUnmount组件销毁前调用destoryedonUnmounted组件销毁完调用
四、获取props
vue2在script代码块可以直接获取propsvue3通过setup指令传递
vue2console.log(‘props’,this.xxx)
vue3setup(props,context){ console.log(‘props’,props) }五、数据和方法的定义
Vue2使⽤的是选项类型APIOptions APIVue3使⽤的是合成型APIComposition API
Vue2
data() { return {}; }, methods:{ }Vue3
数据和⽅法都定义在setup中并统⼀进⾏return{}
六、给父组件传值emit
vue2this.$emit()
vue3setup(props,context){context.emit()}七、watchEffect
Vue3中除了watch还引入了副作用监听函数watchEffect用过之后我发现它和React中的useEffect很像只不过watchEffect不需要传入依赖项。
那么什么是watchEffect呢
watchEffect它会立即执行传入的一个函数同时响应式追踪其依赖并在其依赖变更时重新运行该函数。
computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并当任何你有用到的响应式依赖更新时该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行即{ immediate: true }。
八、组件通信
方式Vue2Vue3父传子propsprops子传父$emitemits父传子$attrsattrs子传父$listeners无(合并到attrs方式)父传子provideprovide子传父injectinject子组件访问父组件$parent无父组件访问子组件$children无父组件访问子组件$refexposeref兄弟传值EventBusmitt
注意
props中数据流是单项的即子组件不可改变父组件传来的值
在组合式API中如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。attrs和listeners
子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。
子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器在Vue3中已经不再使用但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器九、路由
vue3和vue2路由常用功能只是写法上有些区别
vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的大家都知道setup中组件实例已经创建是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的此时组件还未创建所以是无法用在setup中的如果想在setup语法糖中使用则需要再写一个script 如下
script
export default {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},
};
/scriptvue3路由写法
script
import { defineComponent } from vue
import { useRoute, useRouter } from vue-router
export default defineComponent({beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next){//离开当前的组件触发next() }),beforeRouteLeave((to, from, next){//离开当前的组件触发next() }),setup() {const router useRouter()const route useRoute()const toPage () {router.push(xxx)}//获取params 注意是routeroute.params//获取queryroute.queryreturn {toPage}},
});
/scriptvue2写法
script
export default {beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next){//离开当前的组件触发next() }),beforeRouteLeave((to, from, next){//离开当前的组件触发next() }),methods:{toPage(){//路由跳转this.$router.push(xxx)}},created(){//获取paramsthis.$route.params//获取querythis.$route.query}
}
/script十、进阶内容
1.vue3不推荐使用mixin进行复用逻辑提取而实推荐写成hook 2.v-model应用在组件时监听的事件和传递的值的改变 3.vue3并不是完全抛弃了defineproperty,通过reactive定义的响应式数据使用propxy包装出来的而ref还是用的definproperty去给一个而空对象定义了一个value属性来做响应式
