composition API

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

setup

1. setup是一新的配置项，值为一个函数
2. 组件中的数据和方法均需要配置在setup函数中
3. setup有两种返回值，在对象中的属性、方法可以在模板中直接使用
   返回值1：值为对象
   返回值2；渲染函数

<template>
  <h3>一个人的信息</h3>
  <p>姓名：{{name}}</p>
  <p>性别：{{sex}}</p>
  <p>年龄：{{age}}</p>
  <p>{{say()}}</p>
  <button @click="play">在vue2中测试能不能拿到vue3属性和方法</button>
  <br >
  <button @click="say">在vue3中测试能不能拿到vue2属性和方法</button>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      msg: '666'
    }
  },
  methods: {
    play() {
      console.log(this.name)
      console.log(this.age)
      console.log(this.say)
      return this.msg
    }
  },
  setup() {
    let name = '张三'
    let age = 26
    let sex = '男'
    function say() {
      console.log('会说话',this.msg)
      console.log(this.msg)
      console.log(this.play)
    }
    // 1.对象的属性和方法直接可以在模板语法中使用
    return {
      name,
      age,
      sex,
      say
    }
    // 2.返回一个渲染函数,自定义渲染内容
    // return h => h('h3','大标题')
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意点：
vue2和vue3尽量不混用
vue3 setup不可以使用vue2 data、methods、computed...配置项
vue2中的配置项中可以使用vue3中的setup配置项
如果vue2和vue3中配置项的属性相同，优先使用vue3的
setup不能是一个async函数，因为返回值部署renturn对象而是promise

ref

概述

定义一个响应式类型的数据

js中操作

xx.value

模板中使用

<div>xx</div>

注意

接收的数据可以是基本数据类型，也可以是复杂数据类型

简单类型的数据：响应式数据是依靠object.defiendPrototype的get和set
复杂类型的数据：响应式数据类型是通过vue3中新的一个函数relative

<template>
  <h3>一个人的信息</h3>
  <p>姓名：{{name}}</p>
  <p>性别：{{sex}}</p>
  <p>年龄：{{age}}</p>
  <p>职业：{{obj.type}}</p>
  <p>薪水：{{obj.money}}</p>
  <button @click="handleChange">改变信息</button>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      msg: '666'
    }
  },
  methods: {
    play() {
      console.log(this.name)
      console.log(this.age)
      console.log(this.say)
      return this.msg
    }
  },
  setup() {
    // 简单类型的响应式数据
    let name = ref('张三')
    let age = ref(26)
    let sex = ref('男')
    // 复杂类型的响应式数据
    let obj = ref(
      {
        type: '前端开发',
        money: 3000
      }
    )
    function handleChange() {
      name.value = '李四'
      age.value = 22
      sex.value = '女'
      obj.value.money = 5000
    }
    // 1.对象的属性和方法直接可以在模板语法中使用
    return {
      name,
      age,
      sex,
      obj,
      handleChange
    }
    // 2.返回一个渲染函数
    // return h => h('h3','大标题')
  },
}
</script>

relative

概述

定义一个复杂类型的响应式数据（基本类型不要用它），它能够操作深层次的对象 语法：定义一个代理对象const 代理对象 = reactive(源对象)接收一个对象或者数组，返回一个代理对象（简称proxy实例对象）

<template>
  <h3>一个人的信息</h3>
  <p>姓名：{{person.name}}</p>
  <p>性别：{{person.sex}}</p>
  <p>年龄：{{person.age}}</p>
  <p>职业：{{person.obj.type}}</p>
  <p>薪水：{{obj.money}}</p>
  <button @click="handleChange">改变信息</button>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue'
export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  setup() {
    // 简单类型的响应式数据
    // 复杂类型的响应式数据
    let person = reactive(
        {
          name : '张三',
          age : 26,
          sex  : '男',
          obj: {
            type: '前端开发',
            money: 3000
          }
        }
    )
    function handleChange() {
      person.name = '李四'
      person.age = 22
      person.sex = '女'
      person.obj.money = 5000
    }
    // 1.对象的属性和方法直接可以在模板语法中使用
    return {
      person,
      handleChange
    }
    // 2.返回一个渲染函数
    // return h => h('h3','大标题')
  },
}
</script>

ref和reactive的对比

• 从定义角度

  • ref用来定义：基本数据类型
  • reactive用来定义：对象或者数组类型
  • ref也可以定义对象或者数组类型的数据，内部会通过reactive转为代理对象

• 从原理角度对比

  • ref通过Object.defineprotoType()的get和set进行响应式（数据劫持）
  • reactive是用proxy来实现响应式数据的，并通过Reflect操作源对象的内部数据

• 从使用角度分析

  • ref操作数据需要.value,读取数据不需要.value
  • reactive定义数据和操作数据都不需要.value

setup两个注意点

• setup执行机制

• 会在beforCreate之前执行一次，this为undefirnd

• setup参数
  • props值为对象，组件外部传递过来，组件内部声明接收了的属性
  • context：上下文对象
    • attrs值为对象，包含组件外部传递过来，但没有在props配置的声明属性，相当于this.$attrs
    • slots: 插槽内容，相当于this.$slots
    • emit: 分发自定义事件的函数，相当于this.$emit