Vue3学习

---

前言

Vue3将作为主流。

---

一、常用Composition API

1 拉开序幕的setup

1. Vue3中的一个新的配置项，值为一个函数。
2. 组件中所用到的：数据、方法等等，均要配置在setup中。
3. setup函数的两种返回值：
   （1） 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
   （2） 若返回一个渲染函数：则可以自定义渲染内容。（了解）
4. setup函数示例代码：

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <button @click="sayHello">说话</button>
</template>

<script>
// import {h} from 'vue'
export default {
  name: 'App',
  //此处只是测试setup函数，不考虑响应式问题
  setup:function() {
    //数据
    let name = '张三'
    let age = 18

    //方法
    function sayHello(){
      alert(`我叫${name}，我${age}岁了，你好啊！`)
    }
    //返回一个对象（常用）
    return {
      name,
      age,
      sayHello
    }

    //返回一个函数（渲染函数）
    //渲染函数：h('要渲染的元素','渲染的元素中要显示的内容')
    //return ()=>{return h('h1','Vue3')}
  }
}
</script>

2 ref函数

• 作用：定义一个响应式的数据
• 语法：const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据：xxx.value
  • 模板中读取数据：不需要.value，直接<div>{{ xxx }}</div>
• 备注：
  • 接收的数据可以是：基本类型、也可以是对象类型。

1. 处理基本类型
   

• RefImpl ( reference implement) ：引用实现；
• {}里是引用实现的实例对象，简称引用对象。
• RefImpl 中封装了get、set方法。

示例代码如下：

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <button @click="changeInfo">修改个人信息</button>
</template>

<script>
//引入ref
import { ref } from 'vue'

export default {
  name: 'App',
  setup:function() {
    //数据
    let name = ref('张三')	//数据传给 ref 函数
    let age = ref(18)

    //方法
    function changeInfo(){
      name.value='李四',	//get、set均用.value代替
      age.value=28,
      console.log(name,age)
    }
    //返回一个对象（常用）
    return {
      name,
      age,
      changeInfo //注意Vue3必须将值和函数返回！！
    }

  }
}
</script>

效果图如下：

• 点击按钮后数据响应效果：
  

2. 处理对象类型

//template标签
<h2>工作类型：{{ job.type }}</h2>
<h2>薪资水平：{{ job.salary }}</h2>

//数据
let job = ref({
      type : '前端工程师',
      salary : '30K'
    })

//方法
    function changeInfo(){
      // name.value='李四',
      // age.value=28,
      // console.log(name,age)
      job.value.type='UI设计师'
      job.value.salary='60K'
    }

3. reactive函数

4. Vue3的响应式原理

1. 回顾Vue2的响应式原理
   

• 按住 Alt 键可以同时修改多行数据。

2. Vue3的响应式原理_Proxy
   • Proxy：代理
3. Vue3的响应式原理_Reflect
   • Reflect：反射

4 computed函数

示例代码如下：

<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName">
  <br>
  名：<input type="text" v-model="person.lastName">
  <br>
  <span>全名：{{ person.fullName}}</span>
  <br>
  全名：<input type="text" v-model="person.fullName">
  
</template>

<script>
import { reactive , computed} from 'vue'

export default {
  name: 'App',
  setup:function() {
    //数据
    let person = reactive({
      firstName:'张',
      lastName:'三'
    })

    //计算属性
    //computed 返回一个箭头函数或普通函数
    //计算属性——简写（没有考虑计算属性被修改的情况）
    // person.fullName = computed(()=>{
    //   return person.firstName + '-' + person.lastName
    // })

    //计算属性——完整写法（考虑读和写）
    person.fullName = computed({
      get(){
        return person.firstName + '-' + person.lastName
      },
      set(value){
        const nameArr = value.split('-')
        person.firstName=nameArr[0]
        person.lastName=nameArr[1]
      }
    })

    //返回一个对象（常用）
    return {
      person,
    }

  }
}
</script>

注：

• computed（）简写形式，可返回一个箭头函数或普通函数；
• 完整形式返回一个对象，对象里由get(){} 和set(){} 方法；
• const nameArr = value.split(‘-’) ：split方法，值.split('分隔符')

5 watch函数

• watch(监视的参数，监视的回调，监视的配置)

6 watchEffect函数

---

总结