vue3新特性的使用

一、setup使用

Vue3 生命周期钩子，使用setup()方法替换beforecate和created。
这意味着，在这些方法中放入的任何代码现在都只在setup方法中。

export default {
   setup() {
       --方法
   }
}

二、reactive使用

reactive是Vue3中提供实现响应式数据的方法.

reactive参数必须是对象(json/arr)
如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,
如果想更新,可以通过重新赋值的方式.

import { reactive} from 'vue'

export default {
   setup() { 
     const state = reactive({ 
            count: 0 ,
            message:'Hellow world的'
          });
      const handle=()=>{ --点击事件
            num.value++;
            ptitle.value='修改的父组件的值'
            key.value = 'href'
            state.message = '你好，大千世界'  --点击改变响应数据的值
          }
     return {
            state
          }
    }

}

三、ref的使用

ref和reactive一样,也是用来实现响应式数据的方法
由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦
所以Vue3提供了ref方法实现简单值得监听
2.ref本质
ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.
3.ref注意点
在vue中使用ref的值不用通过value获取
在js中使用ref的值必须通过value获取

import { ref,onMounted } from "vue";
export default {
  setup() {
    let box = ref(null); //本质是reactive({value:null})
    // 需要在生命周期获取
    onMounted(()=>{
      // 当界面挂载出来后就会自动执行
      console.log(box.value);
    })
    //接受的是null,原因是setup执行时机比mounted早,dom还没形成
    console.log(box.value);
    return { box };
  },
};

四、provide和inject的父子组件传值（虽然不是新特性）

provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

父组件
import { provide} from 'vue'
provide({
     name:'张三',
     age:26
})

子组件通过inject接受
import { inject } from 'vue'
inject("name")

五、defineComponent函数的使用

在结合了 TypeScript 的情况下，传统的 Vue.extend 等定义方法无法对此类组件给出正确的参数类型推断，
这就需要引入 defineComponent() 组件包装函数

import { defineComponent } from "vue";

type Props = {
  name: string;
};

export const TestComponent = defineComponent<Props>({
  setup(props) {
    return () => <div>props:{props.name}</div>;
  },
});