在vue2项目中使用vue3语法

在vue2项目中想要使用vue3语法怎么办呢？引入@vue/composition-api 依赖

npm install @vue/composition-api 

main文件引入并使用

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

• 在setup中使用refs获取节点：

cons root = ref () ; //root必须与ref名称一致
onMounted(()=>{
console.log(root.value);
})

注意点：root名称必须与暴露的ref名称一致，且return导出。

• 使用父子传值props和emit ，举个栗子。使用弹框组件，设定打开和关闭

父组件：

  <add-operate :showDialog.sync="showDialog" />

子组件接收：

页面template部分直接使用showDialog。

    props: {
        showDialog: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        function cancel() {
            emit('update:showDialog', false);
        };
        return {
            cancel
        }
    },

 

在vue中传值为对象，需要使用reactive{data:{****}}，对data进行赋值，因为proxy对属性进行代理，直接赋值视图不生效。

或者可以采用ref（{}），赋值：.value=** 直接赋值

 

赋值时：

ref定义的变量需要.value=****，但是如果不是赋值，直接使用。

reactive赋值时 .属性=*****

计算属性computed：

使用 计算属性需要加上.value，因为生成的是ref包的响应式数据。

Let count=ref(1);
Let vm=computed(()=>count.value+1);
console.log(vm.value);

 使用watch监听props传过来的对象时，需要使用箭头函数如下：

watch(() => props.num, (newVal, oldVal) => {
                //编辑
                nextTick(() => {
                  ****************
                })
        }, { deep: true })