vue2 跟 vue3的区别

最新推荐文章于 2024-05-28 17:27:23 发布

xxnobug

最新推荐文章于 2024-05-28 17:27:23 发布

阅读量46

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44167138/article/details/133752480

版权

一.vue3 支持碎片

vue2中 template下所有的dom必须在一个根节点下

<template>
    <div>
        <div>一级目录</div>
    </div>
</template>

vue3中则不需要在一个根节点下

<template>
    <div>一级目录</div>
    <div>二级目录</div>
</template>

二. Vue2是Options API Vue3是Composition API

vue2是Options API 在代码里分成了不同的属性，数据方法的声明位置不一样

<script>
export default {
  data() {
    return {
      list: [], // 在data中声明变量
    };
  },
  mounted() {},
  methods: {
    toClick() {},// 在methods中声明方法
  },
};
</script>

vue3是Composition API，直接在setup中声明

<script setup >
const list = [] // 声明变量
let toClick = ()=>{}//声明方法
</script>

vue2中不管是用变量还是方法都得用this，vue3中因为有setup函数所以访问变量还是方法都不需要用this 直接就能访问

三. v-if和v-for的优先级

vue2中当v-if跟v-for同时使用时，v-for的优先级高于v-if
vue3中当v-if跟v-for同时使用时，v-if的优先级高于v-for

四. 响应式的原理改变了

vue2中双向数据绑定是利用了ES5中的 Object.definePropert() 对数据进行劫持结合发布订阅模式的方法来实现
vue3中使用了ES6的Proxy API对数据代理
优点:defineProperty只能监听某个属性监听对象跟数组的需要遍历每一个属性而使用Proxy代理后就可以直接监听到数组或对象内部的变化

五. 生命周期变化

vue3中把beforeCreate和created取消掉 直接用setup来代替 
开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
vue2生命周期          vue3声明周期
beforeCreate   ==    setup()            // 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
created        ==    setup()            // 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
beforeMount    ==    onBeforeMount      // vue3中把beforeMount改名为onBeforeMount  组件挂载到节点上之前执行
mounted        ==    onMounted          // vue3中把mounted改名为onMounted  组件挂载完成后执行
beforeUpdate   ==    onBeforeUpdate     // vue3中把beforeUpdate改名为onBeforeUpdate 组件更新之前执行
updated        ==    onUpdated          // vue3中把updated改名为onUpdated  组件更新完成之后执行
beforeDestroy  ==    onBeforeUnmount    // vue3中把beforeDestroy改名为onBeforeUnmount  组件卸载之前执行
destroyed      ==    onUnmounted        // vue3中把destroyed改名为onUnmounted 组件卸载完成后

六.ref toRef reactive toRefs

ref 可以定义一个响应式的数据，使用时需要用该对象的.value属性才能拿到数据，页面显示时不需要.value 一般用来定义基本数据类型
reactive 可以定义一个引用数据类型的数据除js的基本数据类型之外用来定义对象数组之类不需要用.value来获取数据
toRef 可以将对象中的某一个属性变成响应式的数据修改通过toRef的响应式数据数据会改变页面中的数据也会改变
toRefs 可以将整个对象的属性都变成响应式的数据

总结:使用ref 跟 reactive 定义的数据都可以响应式但如果进行了解构赋值的话响应式就会失效就得使用 toRef 或 toRefs来进行解构赋值这样解构出来的数据才是响应式的

<template>
  <div @click="toChange()" class="btnStyle">
    +1
    <div>
      {{ num }}
    </div>
  </div>
  <div @click="toChangeAge()" class="btnStyle">
    年龄 +1
    <div>
      {{ personObj.age }}
    </div>
  </div>
  <div @click="toChangePerAge()" class="btnStyle">
    解构赋值后 年龄 +1
    <div>
      {{ age }}
    </div>
  </div>

  <div @click="toChangename()" class="btnStyle">
    toRef 或 toRefs NAME 变 小明
    <div>
      {{ name }}
    </div>
  </div>
</template>
<script setup >
import { ref, reactive, toRef, toRefs } from "vue";
const num = ref(0); // 使用ref声明一个基本类型的响应式数据
let toChange = () => {
  num.value = num.value + 1; // 触发这个方法时 数据跟页面中的数据都会改变
};
const personObj = reactive({
  // 使用 reactive 声明一个对象类型的响应式数据
  name: "小红",
  age: 0,
});
let toChangeAge = () => {
  personObj.age = personObj.age + 1; // 方法触发时 数据跟页面中的数据也会改变
};

let { age } = personObj; // 使用解构赋值
let toChangePerAge = () => {
  age = age + 1;
  console.log(age); //  数据修改了 但是页面中的数据没有修改  失去了响应式
};

let name = toRef(personObj, "name"); // 使用 toRef 解构赋值  使用toRefs一样

console.log(name);
let toChangename = () => {
  name.value = "小明"; //  数据修改了 但是页面中的数据也修改  保持响应式
};
</script>
<style scoped>
.btnStyle {
  margin-top: 10px;
  text-align: center;
  background: pink;
}
</style>

七.新增 teleport 组件 “定点传送”

<template>
  <div>1</div>
  <div>2</div>
  <div>3</div>

  <teleport to="#app">
    <div>被插到app后面</div>
  </teleport>
</template>

teleport组件的内容被定点渲染到id是app的dom后面了 to可以是’#id’ ‘.class’ ‘div’

八.vue2中的mixins和vue3中的hooks

vue2中的mixins 是将vue文件的script部分抽离出来放到mixin.js中然后再有需要的vue文件中引入 mixin.js文件并且在vue页面中 mixins 中写入引入的方法

mixin.js

let task = {
  data() {
    return {

    }
  },
  created() {

  },
  methods: {
    clickHandel() {
      console.log('我是mixins clickHandel的方法');
    },
  },
}
export default task

vue文件

  <template>
  <div>
    <p style="margin: 20px 0">
      <el-button @click="allSelection">全选</el-button>
    </p>
  </div>
</template>

  <script>
import task from "../mixins/index.js"; //引入mixin.js文件
export default {
  mixins: [task], //在mixins中添加
  data() {
    return {};
  },
  mounted() {},
  methods: {
    allSelection() {
      task.methods.allSelection(); //调用方法
    },
  },
};
</script>

vue3中的hooks是直接将公共函数抽离出来放到hooks.js中在有需要的vue文件中直接引用
hooks.js

let task = {}
task.toGetDom = (val)=>{
    return '我是hooks方法返回的数据'
}
export default task

vue文件

  <div>
    <div @click="toGetDom">点击获取</div>
  </div>
</template>

<script setup>
import task from "../hooks/index.js"; // 引入hooks文件
let toGetDom = () => {
  console.log(task.toGetDom()); //直接调用hooks文件里的方法
};
</script>

总结:vue2中mixins 组件中引入多个mixinjs的话会导致变量的来源不明确不利于代码维护并且如果有重复的命名的数据或者方法的时候不会合并会导致冲突组件中的命名重复的变量或方法会覆盖掉mixins中的变量或方法多个mixins文件重复的变量和方法会按照引入的顺序后面的覆盖前面的
vue3中的hooks 在vue页面中引入的时候是显式引入很明确就能知道方法或变量来自那个文件