vue2.0和vue3.0区别

vue2.0和vue3.0区别

双向数据绑定的原理改变:‌

Vue2使用Object.defineProperty对数据进行劫持,‌结合发布订阅模式实现双向数据绑定,‌而Vue3则采用了ES6的Proxy API对数据进行代理,‌提供了更多的拦截操作,‌能够监听到属性的删除和新增,‌相比Vue2,‌Vue3的这种实现方式更加高效和灵活。‌Vue3中要用ref包装,通过返回值的 .value属性获取响应式的值 ,修改也需要对 .value进行修改,( 注意在js中要.value,在模板html中解析时会自动添加.value,不需要添加).

html 复制代码
<template>
 <div>
<!-- 不需要.value -->
 {{ testOne }}
 {{ testTwo.directionD}}
 </div>
</template>
 
<script setup>
  const testOne= ref(0)
  
  const testTwo= ref({
    directionD: '',
    directionA: '',
    arr: []
  })
  
  const dataThree= ref({})
 
  // 使用需要.value
  console.log(testOne.value);
  console.log(dataThree.value);
  console.log(testTwo.value.directionD);
  console.log(testTwo.value.directionD);
 
</script>

支持碎片(Fragments):‌

Vue3支持在组件中拥有多个根节点,‌而Vue2则要求每个组件必须有一个单一的根节点。‌这一变化使得组件的结构设计更加灵活,‌减少了不必要的嵌套和复杂性。‌

引入Composition API:‌

Vue3引入了Composition API,‌这是一种新的API形式,‌允许开发者以函数的方式组织组件的逻辑,‌使得代码更加结构化和可重用。‌这与Vue2的Options API形成了鲜明的对比,‌后者通过对象的方式组织组件的选项。‌

语法和API的更新 :‌

Vue3在语法和API上做了一些调整,‌例如,‌样式穿透/deep/的选择器在Vue3中推荐使用()函数,‌而不是Vue2中的/deep/字符串。‌此外,‌Vue3还提供了更简洁和灵活的方式来绑定class和style,‌这些变化都是为了提升开发效率和代码的可读性。‌

css 复制代码
 <style lang="less" scoped>
/* vue2写法 */
/deep/.change {
  color: red;
}
</style>
<style lang="less" scoped>
/* vue3写法 */
:deep(.change ){
  color: red;
}
</style>

去除this

复制代码
    Vue3中没有this, 使用this报错 需要组件内的某个方法直接使用即可(注意使用的数据必须在调用前定义)

组件的生命周期:

指的是组件从创建->运行->销毁的整个过程,强调的是一个时间段。

大部分生命周期在vue2的周期前加 on 即可;vue3没有beforeCreate 和 created两个周期,那想在这两个周期中进行逻辑处理怎么办呢? setup中写好了调用即可👇

vue框架为组件内置了不同时刻的生命周期函数,生命周期函数会随着组件的运行而自动调用。如:①当组件在内存中被创建完毕之后,会自动调用created函数

②当组件被成功的渲染到页面上之后,会自动调用mounted函数

③当组件被销毁完毕之后,会自动调用unmounted函数

vue3中全部的生命周期函数:

数据共享的六种方法:

1.父子关系

①父->子 属性绑定

②子->父 事件绑定

③父<->子 组件上的v-model

2.兄弟关系

①eventBus

3.后代关系

①provide&&inject

4.全局数据共享

①vuex

自定义指令:

vue2中使用的是{bind,update},vue3中使用的是{mounted,updated}

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互