Vue2 与 Vue3在实际开发中的区别

数组双向绑定
- 数组在双向绑定中，不可直接赋值，需要使用push ，使用赋值新数组，将会影响响应式。
- 推荐使用定义响应式对象，在对象中定义数组，可以直接赋值替换
this.$方法
- 在vue3中组件中没有this 方法，所以this.$Message 不可使用
- 推荐在vue 文件中按需加载 Message组件，在代码中使用Message 即可

在使用UI组件库时获取Form表单的校验（Iview/elementUi）

因在Vue3中ref ，无法通过this获取，首选需在setup 中定义ref 同名的响应式变量，并且在校验时采用异步方法

javascript

//定义变量
let formRef= ref();
// 异步获取值
async function submit() {
  await formRef.value.validate((valid) => {
    if (valid) {
      console.log("校验通过");
    } else {
      console.log("校验未通过");
    }
  });
}

在vue3 的路由拦截中，应该使用异步方法，与vue2不同的时，不再使用next()方法，而是改用return true
javascript
```
router.beforeEach(async (to, from) => {
    return true  // 作用等同于 next()
}
```
1
2
3
面包屑实现
- 面包屑实现通过获取路由元数据实现
- 使用 route.matched 方法获取meta中的label 实现
- 注：实现路由元数据实现面包屑，需要做嵌套路由，及每次addRouter添加到父级的name 下
- 嵌套路由需公共的router-view 标签的组件

Vue3中的路由监听

引入watch
使用watch
例如下，监听props 传入参数
监听中执行函数时，需要在函数的下方才可正常访问

javasrcipt

    import { watch } from "vue"

    const getList = ()=>{
        console.log('a')
    }
    watch(
      () => props.menu,
      (newVal) => {
        //要执行的方法
        getList(newVal);
      },
      { immediate: true, deep: true }
    );

vue3 中对prop 接受参数设置默认值以及数据类型

javascript

     const props = defineProps({
       menu: {
         type: String,
         default: "",
       },
     });
     props.menu //使用

vue3中使用emit

javascript

    const emit = defineEmits(["input"]);

    emit('input',value)

Vue2 与 Vue3在实际开发中的区别 ​

Vue2 与 Vue3在实际开发中的区别