Vue3.0 Composition API 组合API

一、Composition API

Composition API本质是将return的值注入到Option API中；
setup函数是Composition API的入口函数；

 <template>
    <div>
      <p>{{count}}</p>
      <button @click="addCount">➕1</button>
    </div>
    <form>
      <input type="text" v-model="state2.s.id">
      <input type="text" v-model="state2.s.name">
      <input type="submit" @click.prevent="addS">
    </form>
    <ul>
      <li v-for="(s) in state.ss" :key="s.id" @click="dele(s.id)">{{s.name}}</li>
    </ul>
  </template>
  <script>
      import addStu from './common/add'
      import addBtnCount from './common/btnAdd'
      import useSsRemove from './common/remove'
      export default {
        name: 'App',
        // setup函数是组合API的入口函数
        setup() {
          let {count, addCount} = addBtnCount()
          let {state,dele} = useSsRemove()
          let {state2, addS} = addStu(state)
          return {
            count,
            addCount,
            state,
            state2,
            addS,
            dele
          }
        },
      }
  </script>

1.setup

<script>
    export default {
      name: 'App',
      // setup函数是组合API的入口函数
      setup() {
        console.log('setup')
      },
      beforeCreate() {
        console.log('beforeCreate')
      },
      created(){
        console.log('created')
      }
    }
</script>
	

• 执行时机
  • 在beforeCreate钩子之前完成
• 注意点
  • setup中不能使用data和methods，
  • setup中的this只向undefined
  • setup中只能是同步的，不能是异步的

2. reactive

 import {reactive} from 'vue'
 function addStu(state) {
   let state2 = reactive({
    s: {
      id:'',
      name:''
    }
  })
  function addS(){
      const sN = Object.assign({}, state2.s)
      state.ss.push(sN)
      state2.s.id = ''
      state2.s.name = ''
    }
    return {state2, addS}
}
export default addStu;

• 介绍
  • reactive是Vue3中提供的实现响应式数据的方法
  • Vue3中响应式数据是通过ES6的Proxy实现的
• 注意点
  • reactive参数必须是对象（json/arr）
  • 如果传递了其他对象，默认情况下修改对象，界面不会自动更新，如果想更新，需要重新赋值

3. ref

import {ref} from 'vue'
function addBtnCount() {
  let count = ref(0);
  function addCount(){
      count.value +=1;
    }
    return {count, addCount}
}

export default addBtnCount;

• 介绍
  • 实现对简单值的响应式监听
  • 添加__v_ref私有属性，取值为true
  • 可以引入vue的isRef,isReactive函数，判断当前值是ref类型还是reactive类型
• 本质
  • ref底层本质还是reactive ref(xx) --> reactive({value:XX})
• 注意点
  • vue中使用ref的值不用通过.value获取
  • js中使用ref的值需要通过value来获取

4. shallowReactive,shallowRef

• reactive,ref 递归监听
• shallowReactive 非递归监听，只监听第一层（没有triggerReactive）
• shallowRef 非递归监听，监听的.value的变化，可以通过triggerRef方法触发界面更新

小结

• ref/reactive数据类型的特点：
  每次修改都会被追踪，都会更新UI界面，会消耗性能，

• 如果有一些操作不需要追踪，不需要更新UI界面，可以使用toRaw方法拿到它的原始数据，对原始数据进行修改