VUE3常用的Composition API（组合式API）

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

1.拉开序幕的setup

mplate>
  <!-- VUE3组建中的模板结构可以没有跟标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <button @click="sayHello">说话(vue3配置)</button>
  <br />
  <button @click="sayWelcome">欢迎(vue2配置)</button>
  <br />
  <button @click="test1">测试一下在vue2中读取Vue3的数据、方法（可以读取到）</button>
  <br />
  <button @click="test2">测试一下在vue3中读取Vue2的数据、方法(读取不到)</button>
  <br />
</template>

<script>
export default {
  name: 'App',
  //   vue2写法
  data() {
    return {
      sex: '男',
    }
  },
  methods: {
    sayWelcome() {
      alert('欢迎欢迎，热烈欢迎')
    },
    test1() {
      console.log(this.sex)
      console.log(this.name)
      console.log(this.age)
      console.log(this.sayHello)
      this.sayHello()
    },
  },
  //   此处只是测试一下setup,暂时不考虑响应式的问题
  setup() {
    // 数据
    let name = '张三'
    let age = 19

    // 方法
    function sayHello() {
      alert(`我叫${name}，我${age}岁了，你好啊`)
    }

    function test2() {
      console.log(this.sex)
      console.log(this.name)
      console.log(this.age)
      console.log(this.sayHello)
    }

    // 返回一个对象，常用
    return {
      name: name,
      age: age,
      sayHello,
      test2,
    }

    // 返回渲染函数
    // return () => h('h1', 'h哈哈哈')
  },
}
</script>

2.ref函数

<template>
  <!-- VUE3组建中的模板结构可以没有跟标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>工作种类：{{job.type}}</h2>
  <h2>岗位性别：{{job.sex}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <br />
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    // refImpl 引用实现对象
    let name = ref('张三')
    let age = ref(19)
    let job = ref({
      type: '前端',
      sex: '女',
    })

    // 方法
    function changeInfo() {
      name.value = '李四'
      age.value = 30
      job.value.type = '程序员'
      job.value.sex = '男'
      console.log(name.value + ', ' + age.value)
    }

    // 返回一个对象，常用
    return {
      name: name,
      age: age,
      job: job,
      changeInfo,
    }

    // 返回渲染函数
    // return () => h('h1', 'h哈哈哈')
  },
}
</script>

3.reactive函数（响应式）

基本类型用reactive报警告

<template>
  <!-- VUE3组建中的模板结构可以没有跟标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>数字：{{person.number}}</h2>
  <h2>工作种类：{{person.job.type}}</h2>
  <h2>岗位性别：{{person.job.sex}}</h2>
  <h2 v-for="item in person.hobby" :key="item">{{item}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <br />
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    // // refImpl 引用实现对象
    // // 基本类型数据用ref,响应对象的数据用reactive
    // let name = ref('张三')
    // let age = ref(19)
    // // 响应对象的数据用reactive
    // let job = reactive({
    //   type: '前端',
    //   sex: '女',
    // })
    // // 响应对象的数据用reactive
    // let hobby = reactive(['吃饭', '睡觉', '打豆豆'])
    let person = reactive({
      name: '张三',
      age: 19,
      job: {
        type: '前端',
        sex: '女',
      },
      hobby: ['吃饭', '睡觉', '打豆豆'],
    })

    // 方法
    function changeInfo() {
      person.name = '李四'
      person.age = 30
      person.job.type = '程序员'
      person.job.sex = '男'
      person.hobby[0] = '我吃饭'
    }

    // 返回一个对象，常用
    return {
      //   name,
      //   age,
      //   job,
      //   hobby,
      person,
      changeInfo,
    }
  },
}
</script>

4.Vue3.0中的响应式原理

vue2修改属性

vue3新增修改删除属性

<template>
  <!-- VUE3组建中的模板结构可以没有跟标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2 v-show="person.age">年龄：{{person.age}}</h2>
  <h2 v-show="person.sex">性别：{{person.sex}}</h2>
  <h2>工作种类：{{person.job.type}}</h2>
  <h2>岗位性别：{{person.job.sex}}</h2>
  <h2 v-for="item in person.hobby" :key="item">{{item}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <br />
  <button @click="addSex">添加性别</button>
  <br />
  <button @click="delAge">删除年龄</button>
  <br />
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    // // refImpl 引用实现对象
    // // 基本类型数据用ref,响应对象的数据用reactive
    // let name = ref('张三')
    // let age = ref(19)
    // // 响应对象的数据用reactive
    // let job = reactive({
    //   type: '前端',
    //   sex: '女',
    // })
    // // 响应对象的数据用reactive
    // let hobby = reactive(['吃饭', '睡觉', '打豆豆'])
    let person = reactive({
      name: '张三',
      age: 19,
      job: {
        type: '前端',
        sex: '女',
      },
      hobby: ['吃饭', '睡觉', '打豆豆'],
    })

    // 方法
    function changeInfo() {
      person.name = '李四'
      person.age = 30
      person.job.type = '程序员'
      person.job.sex = '男'
      person.hobby[0] = '我吃饭'
    }

    // 添加性别
    function addSex() {
      person.sex = '男'
    }

    // 添加性别
    function delAge() {
      delete person.age
    }

    // 返回一个对象，常用
    return {
      person,
      addSex,
      delAge,
      changeInfo,
    }
  },
}
</script>