Composition API (common parts)

1. Composition API (common parts)

document:

​ https://composition-api.vuejs.org/zh/api.html

1) setup

• New option, all combined API functions are used here, only executed once during initialization
• If the function returns an object, the properties or methods in the object can be used directly in the template.

2) ref

• Function: Define a data response
• Syntax: const xxx = ref(initValue):
  • Create a reference object containing reactive data
  • Operation data in js: xxx.value
  • Operation data in template: No .value required
• Generally used to define a basic type of responsive data

<template>
  <h2>{
  
   
   {count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {
  ref
} from 'vue'
export default {

  /* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
  // data () {
  //   return {
  //     count: 0
  //   }
  // },
  // methods: {
  //   update () {
  //     this.count++
  //   }
  // }

  /* 使用vue3的composition API */
  setup () {

    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)

    // 更新响应式数据的函数
    function update () {
      // alert('update')
      count.value = count.value + 1
    }

    return {
      count,
      update
    }
  }
}
</script>

3) reactive

• Function: Define responsiveness for multiple data
• const proxy = reactive(obj): receives a normal object and returns a reactive proxy object of the normal object
• Reactive transformations are "deep": they affect all nested properties within the object
• The internal Proxy implementation is based on ES6, and the internal data of the source object is operated through the proxy object in a responsive manner.

<template>
  <h2>name: {
  
   
   {state.name}}</h2>
  <h2>age: {
  
   
   {state.age}}</h2>
  <h2>wife: {
  
   
   {state.wife}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
/* 
reactive: 
    作用: 定义多个数据的响应式
    const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
    响应式转换是“深层的”：会影响对象内部所有嵌套的属性
    内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import {
  reactive,
} from 'vue'
export default {
  setup () {
    /* 
    定义响应式数据对象
    */
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      },
    })
    console.log(state, state.wife)

    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }

    return {
      state,
      update,
    }
  }
}
</script>

4) Compare the responsiveness of Vue2 and Vue3 (important)

Responsiveness of vue2

• core:
  • Object: hijack (monitor/intercept) the reading and modification of existing property values ​​of the object through defineProperty
  • Array: Implement the hijacking of element modification by overriding the array update array and a series of methods to update elements.

Object.defineProperty(data, 'count', {
   
    
    
    get () {
   
    
    }, 
    set () {
   
    
    }
})

• question
  • If the object directly adds new attributes or deletes existing attributes, the interface will not be automatically updated.
  • Directly replace elements or update length through subscripts, the interface will not automatically update arr[1] = {}

Responsiveness of Vue3

• core:
  • Through Proxy: intercept any (13 types) operations on any attribute of data, including reading and writing attribute values, adding attributes, deleting attributes, etc...
  • Through Reflect: dynamically perform specific operations on the corresponding properties of the proxy object
  • document:
    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

new Proxy(data, {
   
    
    
	// 拦截读取属性值
    get (target, prop) {
   
    
    
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
   
    
    
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
   
    
    
    	return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'tom'   

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"