Vue2进阶Vue3时常见问题

一、生命周期 

         Vue2的生命周期有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed ，但Vue3在Vue2的基础上，将beforeCreate和created整合成了setup()，此外，对Vue2的其他生命周期进行了重命名onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted,使得生命周期更加清晰简单。

二、this问题

• vue2：无时无刻都要使用this，无论是访问data中的数据还是methods中的函数，如下添加品牌案例：

  data: {
            // 用户输入的品牌名称
            brand: '',
            // nextId 是下一个，可用的 id
            nextId: 4,
            // 品牌的列表数据
            list: [
              { id: 1, name: '宝马', status: true, time: new Date() },
              { id: 2, name: '奔驰', status: false, time: new Date() },
              { id: 3, name: '奥迪', status: true, time: new Date() }
            ]
          },
          methods: {
            // 点击链接，删除对应的品牌信息
            remove(id) {
              this.list = this.list.filter((item) => item.id !== id)
            },
            //判断该品牌是否可以添加
            isTrue() {
              // 如果判断到 brand 的值为空字符串，则 return 出去
              if (this.brand === '') {
                alert('必须填写品牌名称！')
                return false
              }
              if (this.status === false) {
                alert('该品牌已经下架！')
                return false
              }
              return true
            },
            // 阻止表单的默认提交行为之后，触发 add 方法
            add() {
              // 判断是否可以添加
              if (this.isTrue()) {
                // 可以添加
                // 1. 先把要添加的品牌对象，整理出来
                const obj = {
                  id: this.nextId,
                  name: this.brand,
                  status: true,
                  time: new Date()
                }
                // 2. 往 this.list 数组中 push 步骤 1 中得到的对象
                this.list.push(obj)
                // 3. 清空 this.brand；让 this.nextId 自增 +1
                this.brand = ''
                this.nextId++
              }
            }
          }

• vue3中：因为setup函数的存在，所有的props、data等都不需要用this进行访问。（vue3对vue2绝大多数是兼容的，如果你用了vue2相关的东西，那你还是需要像vue2一样书写）

  // 声明响应式商品列表数组list
  const list = ref([])
  // 获取商品列表函数
  const getList = async () => {
    // 接口调用
    const res = await axios.get('/list')
    // 交给list
    list.value = res.data
  }
  // 调用获取商品列表的函数
  onMounted(()=> getList())

二、响应式

        在 Vue 3 中，ref 用于创建响应式的引用（references），它总是返回一个包装对象，这个对象的 .value 属性包含了真正的响应式值。

在以下情况下，需要使用 .value：

• 在 JavaScript/TypeScript 代码中直接访问或修改 ref 创建的响应式变量的值：当你在 setup 函数或组件的其他方法、计算属性等地方直接操作 ref 创建的响应式变量时，你需要通过 .value 来访问或修改其值。

import { ref } from 'vue';

const count = ref(0);

// 访问值
console.log(count.value); // 输出: 0

// 修改值
count.value++;
console.log(count.value); // 输出: 1

• 在 watch 或 watchEffect 中观察 ref 创建的响应式变量：在观察 ref 创建的响应式变量时，你同样需要通过 .value 来访问其值。

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal.value} to ${newVal.value}`);
});

在以下情况下，不需要使用 .value：

•  在 Vue 模板中：当你在 Vue 的模板中引用 ref 创建的响应式变量时，Vue 会自动为你解包（unwrap）这个值，所以你不需要使用 .value。

  <template>
    <p>{{ count }}</p> <!-- Vue 会自动解包 ref 的值，不需要 .value -->
  </template>

• 在 setup 函数的返回值中：当你在 setup 函数中返回一个响应式变量给模板时，你不需要使用 .value。Vue 会自动处理这些响应式变量，使它们在模板中可用。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return {
      count // 不需要写 count.value
    };
  }
};

• 在 computed 计算属性中：当你在 setup 函数中使用 computed 创建计算属性，并引用 ref 创建的响应式变量时，你不需要使用 .value。Vue 会自动处理这些依赖关系。

总的来说：当你在 Vue 的模板或 setup 函数的返回值中引用 ref 创建的响应式变量时，不需要使用 .value。但在 JavaScript/TypeScript 代码中直接操作这些变量时，你需要通过 .value 来访问或修改其值。

四、Vue3 引入了 Composition 组合式 APl

        在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合），即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。

 文章内容源于参考各个平台对Vue3的解读和官网简介 | Vue.js