Vue2和Vue3的区别有哪些，附代码深度解析。欢迎交流

先跟大家解析一下Vue2和Vue3的区别。我也在代码里面特别指出。
下图的我就不说了，只能说句尤大大牛皮！！！
在这里插入图片描述

Vue3不强制要求template只有一个根节点
父组件定义自定义事件的时候，子组件需要自行声明，才可以调用，否则会报警告。警告不影响使用。
slot="ha"的写法在Vue3不推荐使用（我这里的话会报错，然后我保存自动帮我改错了，改成了 v-slot:qwe的写法）
Vue3.0中一个新的配置项，值为一个函数。组件中所用到的：数据、方法等等，均要配置在setup中。之前Vue2的写法就是先在data里面声明，然后定义方法就需要去methods里面定义。然后通过this.去调用。
Vue2是父组件传递了参数，我子组件只要不用都可以不用声明。Vue3的话就比如Father.vue传递了hobby，我子组件不用hobby，不声明 props: [“hobby”],还会报警告。

<template>
  <div>我是Vue3父组件</div>
  <!-- 我现在要把我儿子引入进来 -->
  <Son @hello="getHello" school="北京大学" hobby="敲代码">
    <template v-slot:qwe>
      <span>南京大学</span>
    </template>
    <!-- api兼容问题，目前Vue3推荐v-slot，但是我的输入法不允许我用slot="ha"，会自动帮我改写成v-slot:ha-->
    <template v-slot:ha>
      <span>南京大学！！！</span>
    </template>
  </Son>
</template>

<script>
import Son from "./Son.vue";
export default {
  name: "Father",
  components: {
    Son,
  },
  setup() {
    function getHello(value) {
      console.debug(`我被调用了呢，我接受的参数是${value}`);
    }
    return {
      getHello,
    };
  },
};
</script>

<template>
  <!-- 注意：Vue3不强制要求template只有一个根节点 -->
  <div>我是Vue3子组件</div>
  <div>我的学校是：{
   
   { school }}</div>
  <button @click="test">我要调用父组件的事件</button>
  <!-- 这边调用的是带名字的插槽用法，如果不带名字，直接<slot></slot> -->
  <slot name="qwe"></slot>
  <slot name="ha"></slot>
</template>

<script>
export default {
  name: "Son",
  // 注意：这里也是和Vue2不一样的地方，Vue2是父组件传递了参数，我子组件只要不用都可以不用声明。Vue3的话就比如Father.vue传递了hobby，我子组件不用hobby，还是会报警告。
  props: ["school", "hobby"],
  // 使用方式跟props一样，就是要声明父组件自定义事件，告诉子组件
  emits: ["hello"],
  beforeCreate() {
    // 这里佐证setup比beforeCreate更先执行。
    console.debug("--beforeCreate--");
  },
  setup(props, content) {
    // content里面有三个参数：attrs，emit，slots，他们都分别相当于Vue2的$attrs，$emit，$slots
    // props.school之所以能调用到值，是因为props声明了。所以输出：北京大学
    // 注意content.attrs之所以没有值，是因为props声明了值，如果没声明的就会在里面进行打印。同时没声明的也会警告。
    // 注意content.emit之所以没有值，是因为props声明了值，如果没声明的就会在里面进行打印。同时没声明的也会警告。
    // content.slots接收了自定义插槽名字的内容。会在里面显示qwe和ha
    console.debug("--setup--", props, content);
    function test() {
      // 没有声明emits: ["hello"]的话，可以用但是会报警告错误
      // 调用父组件的自定义hello事件，并传参666
      content.emit("hello", 666);
    }
    return {
      // 这里必须返回出去，告诉大家这个可以被调用
      test,
    };
  },
};
</script>

博博自己总结的，可能有些地方说的不对，欢迎指教交流。谢谢。学到目前感觉Vue3还是非常好的！

Vue2和Vue3的区别有哪些，附代码深度解析。欢迎交流

猜你喜欢