Vue3-Composition Api

vue3 中新加入了 composition Api ,以setup 为入口

目的：将同一个逻辑关注点相关代码收集在一起，避免逻辑相关的代码分散的较远（将数据的定义，监听，相关方法放在一起）

注意：setup 是 CompositionApi 的入口，返回一个对象，内部this 指向 undefined，无法访问 data 、methods,

简单示例

export default {
  name: 'App',
  data:()=>{
    return {
      message:'lsk',
      user:{
        firstName:'lin',
        lastName:'kang'
      }
    }
  },
  setup(props,context){
    console.log('props',props,context)
    const count = ref(0)
    const stop = watchEffect(()=>{
      console.log(count,count.value)
    })

    return {
      count,
      stop,
      increase:()=>{
        count.value++
      }
    }
  }
}

1.ref ,toRefs,reactive

   ref

      将一些简单数据转换为响应式的，处理数据要加上value属性

const msg = ref("lsk")


msg.value = 'kang'

   reactive:

        可以将一些复杂数据转换为响应式的  如数组,duix

const obj = reactive({
    name:'lsk'
})

obj.name = 'qq'   // 响应式，页面数据会变化

let { name } = obj  // 结构后的name就不是响应式的了

name = 'kang'     // 非响应式

   toRefs:

        将对象的每个属性都变成响应式的

const obj = toRefs({
    name:'lsk'
})

obj.name = 'qq'   // 响应式，页面数据会变化

let { name } = obj  // 结构后的name就也是响应式的

name = 'kang'     // 响应式

2. 生命周期钩子函数

区别在 普通钩子函数前加上 on 如 mounted ------>onMounted

且onMounted(fn) 的参数是一个函数,具体见下图

注意：

unmounted :类似于destroyied

onrenderTracked: render 函数首次调用时渲染触发

onrenderTriggered: render 函数首次调用不触发