Composition API 使用

响应性基础 API

mkdir 03-composition-api
# 初始化项目package.json
npm init --yes
# 安装vue3
npm install vue@next --save

• reactive返回对象的响应式副本

  
  
  
    
      
      
      
      
    
    
      
  
        x: {{ position.x }}
  
        y: {{ position.y }}
      
      
    
  
  

  可以将鼠标移动的相关的参数和方法统一封装在一个函数中，使用toRefs将响应式对象转换为普通对象

  // 将鼠标移动相关统一放在一起
  function useMousePosition() {
    const position = reactive({
      x: 0,
      y: 0,
    })
  
    const update = (e) => {
      position.x = e.pageX
      position.y = e.pageY
    }
  
    onMounted(() => {
      window.addEventListener('mousemove', update)
    })
  
    onUnmounted(() => {
      window.removeEventListener('mousemove', update)
    })
    // 返回时转换为ref
    return toRefs(position)
  }
  

  然后在 setup 函数中使用

  setup() {
    // 通过toRefs可以在不失去响应性的情况下解构
      const { x, y } = useMousePosition()
      return {
          x,
          y,
      }
  }
  

• ref 接受一个内部值并返回一个响应式且可变的 ref 对象

  ...
  
    增加
    {{ count }}
  
  ...
  
  

• computed 接受一个 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象

  ...
  
    按钮
    未完成：{{ activeCount }}
  
  ...
  
  

• watch watch 与 Options API this.$watch(以及相应的 watch 选项) 完全等效

  createApp({
    setup() {
      const question = ref('')
      const answer = ref('')
  
      watch(question, async (newValue, oldValue) => {
        const response = await fetch('https://www.yesno.wtf/api')
        const data = await response.json()
        answer.value = data.answer
      })
      return {
        question,
        answer,
      }
    },
  }).mount('#app')
  

• watchEffect 在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它

  createApp({
    setup() {
      const count = ref(0)
      const stop = watchEffect(() => {
        console.log(count.value)
      })
  
      return {
        count,
        stop,
        increase: () => {
          count.value++
        },
      }
    },
  }).mount('#app')
  

项目地址