compositionAPI组合vue3的reactive方法 setup方法

巩固语法:

ES6允许使用“箭头”（=>）定义函数
var f = a = > a

//等同于
var f = function(a){
    
    
   return a;  
}

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

//无形参
var f = () => 5;
// 等同于
var f = function () {
    
     return 5 };

//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    
    
  return num1 + num2;
};

call() 方法

使用 call() 方法，您可以编写能够在不同对象上使用的方法。
通过 call()，您能够使用属于另一个对象的方法。

var person = {
    
    
    fullName: function() {
    
    
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    
    
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    
    
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

reactive（）函数

接收一个普通对象，返回一个响应式的数据对象

例子:

import {
    
    reactive,computed} from 'vue'
export default {
    
    
  setup () {
    
    
    const data = reactive(
      {
    
    
        count: 0,
        double: computed(()=>data.count *2)
      })
    return {
    
    data}
  }
}

html:

<h3>count:{
   
   {data.count}}</h3>
<h3>double:{
   
   {data.double}}</h3>

setup方法

setup()是vue3中专门新增的方法，可以理解为composition api的入口。

const mycomponent={
    
    
setup(props,context){
    
    
context.attrs
context.slot
context.parent
context.root
context.emit
context.refs}}

contextSetup的第二个参数，是一个上下文对象，这个上下文对象包含了以上属性，注意在setup()函数中无法访问this
setup在创建组件之前被调用，因此在setup被执行时，组件实例并没有被创建