Vue3笔记

setup

1. Vue3.0中一个新的配置项，值为一个函数。
2. 组件中所用到的：数据、方法等等，均要配置在setup中。
3. setup函数的两种返回值：
   1. 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注！）
   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
4. 注意点：
   1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
      • 如果有重名，setup优先。
   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

<template>
  <h1>个人信息</h1>
  <h2>姓名：<input type="text" v-model="name"></h2>
  <h2>年龄：<input type="text" v-model="age"></h2>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
  export default {
    name: 'App',
    components: {},
    // 这个例子不是响应式的
    setup() {
      let name = "zhenchengli"
      let age = 20
      function changeInfo() {
        // 这个例子中, 这样修改后页面上的数据不会响应变化
        name = "lzc"
        age = 18
      }
      // 需要将数据和方法返回
      return {
        name,
        age,
        changeInfo
      }
    }
  }
</script>

ref

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

语法： const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象。
• JS中操作数据： xxx.value
• 模板中读取数据: 不需要xxx.value，直接<div>{{xxx}}</div>

备注：

• 接收的数据可以是：基本类型、也可以是对象类型。
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
• 对象类型的数据：内部使用的是Vue3.0中的一个新函数—— reactive函数。

<template>
  <h1>个人信息</h1>
  <h2>姓名：<input type="text" v-model="name"></h2>
  <h2>年龄：<input type="text" v-model="age"></h2>
  <h2>岗位：<input type="text" v-model="job.type"></h2>
  <h2>薪水：<input type="text" v-model="job.salary"></h2>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
  import {ref} from 'vue';
  export default {
    name: 'App',
    components: {},
    setup() {
      // 使用ref会生成一个RefImpl实例对象, 数据才能响应式
      let name = ref("zhenchengli")
      let age = ref(20)
      let job = ref({
        type:"Java开发",
        salary:"1k"
      })
      function changeInfo() {
        console.log(name)
        console.log(age)
        console.log(job.value)
        // 修改RefImpl对象的值
        name.value = 'lzc'
        age.value  = 18
        job.value.type = '前端开发'
        job.value.salary = '2k'
      }

      return {
        name,
        age,
        job,
        changeInfo
      }
    }
  }
</script>

reactive

• 作用：定义一个对象类型的响应式数据（基本类型不要用它，基本类型用ref函数）
• 语法：const 代理对象 = reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

<template>
  <h1>个人信息</h1>
  <h2>姓名：<input type="text" v-model="person.name"></h2>
  <h2>年龄：<input type="text" v-model="person.age"></h2>
  <h2>岗位：<input type="text" v-model="person.job.type"></h2>
  <h2>薪水：<input type="text" v-model="person.job.salary"></h2>
  <h2>爱好：{{person.hobby}}</h2>
  <button @click="changeInfo">更改信息</button>
  <!--  <router-view/>-->
</template>

<script>
  import {reactive} from 'vue';
  export default {
    name: 'App',
    components: {

    },
    setup() {
      const person = reactive({
        name:"zhenchengli",
        age:20,
        job: {
          type:"Java开发",
          salary:"1k"
        },
        hobby:["跑步","打球"]
      })
      function changeInfo() {
        console.log(person)
        person.name = 'lzc'
        person.age  = 18
        person.job.type = '前端开发'
        person.job.salary = '2k'
        // 可以直接通过索引修改 vue2中不能这样修改
        person.hobby[0] = "唱歌"
      }
      // 将对象、方法返回
      return {
        person,
        changeInfo
      }
    }
  }
</script>

响应式原理