vue2 跟 vue3的区别

一.vue3 支持碎片

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

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

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

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

二. Vue2是Options API Vue3是Composition API

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

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

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

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

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

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

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

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

   四. 响应式的原理改变了

3. vue2中 双向数据绑定是利用了ES5中的 Object.definePropert() 对数据进行劫持 结合发布订阅模式的方法来实现
4. vue3中使用了ES6的Proxy API对数据代理
5. 优点: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

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

1. 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>

2. 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页面中引入的时候是显式引入 很明确就能知道 方法或变量来自那个文件

九.默认的打包工具改变

1. vue2中默认的打包工具是 Webpack

2. vue3中默认的打包工具是 Vite
   总结:
   Webpack对于大项目文件的时候启动编译或者热更新都会很慢 但首屏加载的时候很快
   Vite 启动编译跟热更新都跟快 但是首屏加载就很慢
   各有利弊

   十.默认的状态管理器改变

   未完待续