Vue3中的setup和ref && reactive函数

vue3常用composition API

一、拉开序幕的setup

1.setup是所有composition API 的平台，他是vue3的新的配置项，值为一个函数；

2.组件中所用到的：数据，方法等等，全部配置到setup中。

3.setup的两种返回值：

        (1)返回一个对象，其中的对象为本身定义的属性，方法，在模板中可以直接使用

     （2)返回一个渲染函数：则可以自定义渲染的内容

4.vue2中的配置（data、methods、computed等）不要和setup一起使用；

vue2中可以访问setup中的属性方法，但是setup不能访问vue2的配置属性、方法

当属性、方法重名冲突时，setup优先；

<template>
  <!--可以不需要根标签了，不会报错，也可以添加根标签-->
  <h1>我是app组件</h1>
  <h2>姓名{{name}}</h2>
  <h2>年龄{{age}}</h2>
  <button @click="say">说话</button>
</template>

<script>
// import {h} from 'vue'
export default {
  name: 'App',
  components: {
  },
  setup(){
    /*数据*/
    let name = '张三'
    let age = 18
    /* 方法*/
    const say = () =>{
      alert('我的名字叫' + name,`我今年${age}岁`)
    }
    //1.返回对象
    return {
      name,
      age,
      say
    }
    //2.渲染函数
    // return () => h('h1','我是渲染函数')
  }
}
</script>

二、main.js文件配置

vue3引入的是createApp的工厂函数；

/* vue3不在是引入vue构造函数，引入的是一个名为createApp的
* 工厂函数
*  */
import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

/* 创建应用实例对象--app（类似之前vue2的vm）*/
const app = createApp(App)
/* 挂载*/
app.mount('#app')

/* unmount卸载挂载*/
// setTimeout(()=>{
//     app.unmount('#app')
// },2000)

三、ref函数

作用：定义一个响应式的数据

语法：const xxx = ref(数据)

        （1）创建一个包含响应式数据的引用对象（ref对象）

        （2）js中操作数据，使用 xxx.value 那到数据 

        （3）在模板中使用数据时，不需要 xxx.value，直接使用<div>{{xxx}}</div>

注意：可以处理基本数据类型，也可以处理引用数据类型；

<template>
  <!--可以不需要根标签了，不会报错，也可以添加根标签-->
  <h1>我是app组件</h1>
  <h2>姓名{{name}}</h2>
  <h2>年龄{{age}}</h2>
  <h2>工作{{job.type}}</h2>
  <h2>薪水{{job.salary}}</h2>

  <button @click="changeInfo">修改信息</button>
</template>

<script>
/* 引入ref函数 ,实现响应式数据 */
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    /*数据*/
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type:'前端工程师',
      salary:30000
    })
    const changeInfo = ()=>{
      name.value = '李四'
      age.value = 25
      job.value.type = 'UI设计师'
      job.value.salary = '1000'
      console.log(job.value)
    }
    //1.返回对象
    return {
      name,
      age,
      job,
      changeInfo
    }

  }
}
</script>

四、reactive函数

（1）作用：定义一个对象类型（对象或者数组）的响应式数据（基本类型使用ref函数）

（2）语法：const 代理对象 = reactive(源对象)，接收一个对象或者数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

（3）reactive定义的响应式数据是深层次的；

（4）内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据

五、vue2和vue3中响应式数据

（1）vue2中对data数据操作响应式

方法：vm.$set()，vm.delete()方法；或者数组的splice()方法

<template>
  <div id="app">
    <h1>我是vue2对数据的操作</h1>
    <hr>
    <h2 v-if="person.name">姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2 v-if="person.gender">性别：{{ person.gender }}</h2>
    <h2>爱好：{{ person.hobby }}</h2>
    <hr>
    <button @click="addGender">增加性别属性</button>
    <button @click="deleteName">删除年龄属性</button>
    <button @click="undataFn">修改爱好</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      person: {
        name: '法外张三',
        age: 40,
        hobby: ['吃饭', '打官司']
      }
    }
  },
  methods: {
    addGender() {
      this.$set(this.person, 'gender', '男')
    },
    deleteName() {
      this.$delete(this.person, 'name')
    },
    undataFn() {
      /* $set方法 */
      // this.$set(this.person.hobby, 0, '吹牛皮')
      /* splice方法 */
      this.person.hobby.splice(0, 1, '烫头')
    }
  }
}
</script>

（2）Vue3中响应式数据操作

在setup函数里，可以直接对数据进行操作，不需要使用vue或vue.prototype身上的方法

reactive函数可以帮助我们直接实现数据的响应式操作；

<template>
  <!--可以不需要根标签了，不会报错，也可以添加根标签-->
  <h1>我是app组件</h1>
  <h2 v-if="person.name">姓名{{ person.name}}</h2>
  <h2>年龄{{ person.age}}</h2>
  <h2>爱好{{ person.hobby}}</h2>
  <h2 v-if="person.sex">性别：{{person.sex}}</h2>
  <button @click="addSex">添加性别</button>
  <button @click="deleteName">删除名字</button>
</template>

<script>
/* 引入ref函数 ,实现响应式数据 */
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    /*数据*/
    let person = reactive({
      name:'张三',
      age:18,
      hobby:['抽烟','喝酒']
    })
    function addSex(){
      person.sex = '男'
    }
    function deleteName(){
      delete  person.name
    }
    //1.返回对象
    return {
      person,
      addSex,
      deleteName
    }
  }
}
</script>