大理网站建设沛宣,工作内容如何创造价值,南京企业网,移动端模板 wordpress目录 1. 实现数据响应式的原理不同
2. 生命周期不同
3. vue 2.0 采用了 option 选项式 API#xff0c;vue 3.0 采用了 composition 组合式 API
4. 新特性编译宏
5. 父子组件间双向数据绑定 v-model 不同
6. v-for 和 v-if 优先级不同
7. 使用的 diff 算法不同
8. 兄弟组…目录 1. 实现数据响应式的原理不同
2. 生命周期不同
3. vue 2.0 采用了 option 选项式 APIvue 3.0 采用了 composition 组合式 API
4. 新特性编译宏
5. 父子组件间双向数据绑定 v-model 不同
6. v-for 和 v-if 优先级不同
7. 使用的 diff 算法不同
8. 兄弟组件间的通信 eventBus
9. vue 3.0 提供了 TypeScript 支持
10. 脚手架不同
11. 获取 DOM 的方法不同
12. vue-router 的使用细节
13. vuex 与 pinia
14. vue 3.0 废除了 filters 过滤器的使用
15. template 模版中根标签的问题
16. 语法细节的不同
写在最后 1. 实现数据响应式的原理不同
① vue 2.0
通过 es5 的语法 Object.defineProperty()数据劫持的方式实现数据的响应式。
② vue 3.0
通过 Proxy 代理对象的方式实现数据的响应式。因此又多了一些定义响应式数据的方法如 ref、reactive、roRef、toRefs。 ref接收简单类型或者对象类型的数据传入并返回一个响应式的对象。RefImpl修改值获取值的时候需要.value。reactive接受对象类型数据的参数传入并返回一个代理响应式的对象。Proxy toRef转换响应式对象中某个属性为单独响应式数据并且值是关联的。toRefs转换响应式对象中所有属性为单独响应式数据并且值是关联的。
2. 生命周期不同
① vue 2.0 一共 10 个生命周期
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivatedkeep-alive 组件缓存技术激活deactivatedkeep-alive 组件缓存技术未激活beforeDestroydestroyed
② vue 3.0 一共 7 个生命周期
setuponBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmounted
总结
废弃了 activated、deactivated 生命周期函数。setup 函数是整个组件的起点执行时机在 beforeCreate 之前所以没有办法拿到当前组件实例 this。但是 setup 函数里可以接收两个形参 props 和 context。 props 为属性context 为当前组件实例也是就相当于vue 2.0 中的 this。vue 3.0 中的生命周期函数使用函数调用的方式执行所以可以多次调用执行。
3. vue 2.0 采用了 option 选项式 APIvue 3.0 采用了 composition 组合式 API
① option API
数据定义在 data 里属性定义在 props 里计算属性定义在 computed 里方法定义在 methods 里。相较于 vue 3.0 则更易于学习和使用。
② composition API
一个功能逻辑的代码组合在一起。相较于 vue 2.0 更易于阅读和维护。
小插曲谈一谈自己对于 vue 2.0 和 vue 3.0 的选项式 API 和组合式 API 的理解
vue 3.0 是在 2020 年 10 月发布的。由于写 vue 2.0 的时间比较早所以当时在转入 vue 3.0 的时候并没有花太多时间。感受最深的一点就是在 vue 3.0 中无法使用 this前文已经谈过 this 的问题在这里不再赘述。而 vue 3.0 也可以分为两个版本vue 3.3 以下的版本其实感觉还是 option API 的写法因为在 setup 函数平级的节点中依然可以定义 props 和 components 节点只不过是把数据和方法定义在 setup 函数里然后通过 return 出来使用。 在 vue 3.3 及 3.3 以上的版本中引入了 script setup 语法糖。此时props 和 components 这些节点就不存在了setup 函数也没有 return 了那么为了使用 props 和 context 等又提供了一些新的编译宏。 4. 新特性编译宏
常用的编译宏如下
defineProps定义属性 defineEmits定义自定义的事件的触发 defineExpose向外暴露组件的属性和方法 在非语法糖的写法中通过 setup 函数的 return 出来了属性和方法所以无须使用defineExpose defineOptions向外暴露组件的一些自定义属性如 name defineModelvue 3.0 中父子组件间的双向数据绑定 const modelValue defineModel()
5. 父子组件间双向数据绑定 v-model 不同
① vue 2.0
父组件默认传递的属性是 value子组件默认触发的自定义事件是 input
② vue 3.0
父组件默认传递的属性是 modelValue子组件默认触发的自定义事件是 update:modelValue
6. v-for 和 v-if 优先级不同
vue 2.0 中 v-for 的优先级高vue 3.0 中 v-if 的优先级高
7. 使用的 diff 算法不同
① vue 2.0
同级比较根元素变化整个 dom 树删除重建根元素未变 属性改变更新属性子元素内容改变 无 key 就地更新有 key 按 key 比较
② vue 3.0
将静态节点与动态节点分离通过高效标记和打补丁的方式更新 dom
总结
所以 vue 3.0 的渲染性能优于 vue 2.0
8. 兄弟组件间的通信 eventBus
vue 2.0 中的 eventBus 是一个 vue 的实例对象vue 3.0 中的eventBus 是 mitt 库
9. vue 3.0 提供了 TypeScript 支持
10. 脚手架不同
vue 2.0 的打包工具是 webpackvue 3.0 的打包工具是 vite
11. 获取 DOM 的方法不同
vue 2.0 直接绑定 ref使用 this.ref.属性名的方式直接获取vue 3.0 需要先定义 const box ref(null)再进行绑定
12. vue-router 的使用细节
① vue 2.0
通过 this.$router 和 this.$route 拿到全局的路由对象和当前的路由对象路由前置守卫 to: 即将要进入的目标 路由对象from:当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 放行路由跳转next(false)拦截路由跳转
const router new VueRouter({ ... })router.beforeEach((to, from, next) {// ...
}) ② vue 3.0
通过 const router useRouter() 和 const route useRoute() 拿到全局的路由对象和当前的路由对象路由前置守卫 少了 next return false 拦截回 from 的地址页面 return undefined / true 直接放行
const router createRouter({ ... })router.beforeEach((to, from) {// ...// 返回 false 以取消导航return false
})
13. vuex 与 pinia
① vue 2.0 vuex state 定义数据mutations 执行同步代码修改 state 中的数据必须通过 mutations在组件中通过 commit 提交 mutation 的方式actions 执行异步操作在组件中通过中通过 dispatch 派遣 action 的方式getters 类似于 computed 计算属性或者过滤器modules 模块化
② vue 3.0 pinia
将 mutations 和 actions 合二为一不在区分同步和异步操作去掉了 modules 模块化的概念每一个 store 都是一个独立的模块提供了丰富的插件配置及配置对象如在实现数据本地持久化上可以通过插件直接配置 persist: true就可以直接实现。 当时写 vue 2.0 的项目记得是自己封装了一个 get、set 操作 localstorage 的方法去实现本地数据的持久化
14. vue 3.0 废除了 filters 过滤器的使用
15. template 模版中根标签的问题
vue 2.0 中必须有一个根标签元素vue 3.0 则不用
16. 语法细节的不同
此外就是一些语法上的使用细节不做深入比较阐述了。如vue 3.0 一般是通过 Createxxx 创建实例 CreateApp 创建 vue 实例CreateRouter 创建路由对象CreatePinia 创建 pinia
写在最后
个人实际开发中使用下来感受到的区别和不同点欢迎大佬们修正与补充。借用人民日报今年的广告语“请你努力为了你自己。”
