vue3 组合api的简单使用

 

//compostion api (组合api)
import { ref, reactive,onBeforeMount, onMounted,onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,computed,watch,nextTick} from 'vue'

export default{
    setup(){
        // 非响应式变量
        let msg = "hello wrold";
        // 响应式变量
        let title = ref("hello wrold");
        const student = reactive({ name: "小米", age: 18 });
        function sayHi(){
            msg = "hello vue";  //msg的值不会变
            title.value = "hello vue";
            student.name = "小明";
        }
        
        // 生命周期
        //setup本身就是created
        console.log('beforeCreate')
        onBeforeMount(()=>{
            console.log("onBeforeMount")
        })
        onMounted(()=>{})
        onBeforeUpdate(()=>{})
        onUpdated(()=>{})
        onBeforeUnmount(()=>{})
        onUnmounted(()=>{})
        
        // 计算属性
        const number = computed(()=>{
            return 100
        })
       // watch监听 :
　　　　// 1》监听reactive类型： 第一个参数：具体被监听的值(可以是数组，例：[()=>student.name,()=>student.age,])，第二个参数：新旧值箭头函数(可以是数组。例：[nameNew,ageNew],[nameOld,ageOld])，第三个参数：组件刚被创建时不监听 
　　　　watch(

　　　　　　student.name,

　　　　　　(newVal,oldVal) => {
　　　　　　　　console.log(new,old)}
　　　　　　),
　　　　　　{lazy:true}

　　　　)

      watch(

　　　　　　()=>student.name,

　　　　　　(new,old) => {
　　　　　　　　console.log(new,old)}
　　　　　　),

          {deep:true, //深度侦听
           immediate:true //立即执行}

　　　　)

　　　　// 2》监听ref类型：
　　　　wacth(title,(new,old)=>{

　　　　　　console.log(new,old)}

　　　　}) 

　　　　// 3》清除监听
       const stop = watch(()=>{
            //
       })

　　　　stop()
　　　　// nextTick
　　　　nextTick(()=>{})

　　   // 暴露出变量以及方法 

　　   return { msg, title, student, sayHi, number，stop } } }

 

//对比vue2的选项api

export default{
    data(){
        return {
            msg: 'hello world',
            total: 0
        }
    },
    //计算属性
    computed:{
        total(){
            return 100
        }    
    },
    // 生命周期
    beforeCreate:{},
    created{},
    beforeMount{},
    mounted{},
    // ...
    methods:{
        showHi(){}    
    }
}

 学习参考链接：http://www.liulongbin.top:8085/#/

 computed用法：