为什么要学习vue3

Vue是国内最火的前端框架

Vue 3 于 2022 年 2 月 7 日星期一成为新的默认版本！
Vue3性能更高，体积更小

Vue3.0在经过一年的迭代后，越来越好用

vue3新特性

数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

虚拟DOM - 新算法 (更快更小)

提供了composition api, 可以更好的逻辑复用

模板可以有多个根元素

源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

使用vite创建vue3项目，只需要在浏览器请求源码时进行转换并按需提供源码,无需打包。

setup 函数

setup 函数的特点：

composition api的使用, 需要配置一个setup 函数

setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点

从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行

setup 中不能使用 this, this 指向 undefined

在模版中需要使用的数据和函数，需要在 setup 返回。

<template>
  <div class="container">
    <h1 @click="say()">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }

    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

reactive 函数

setup 需要有返回值, 只有返回的值才能在模板中使用

默认普通的数据, 不是响应式的

作用: 传入一个复杂数据类型，将复杂类型数据, 转换成响应式数据（返回该对象的响应式代理）

<template>
  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
  <button @click="obj.name = 'ls'">改值</button>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup () {
    // 1. setup 需要返回值, 返回的值才能在模板中使用
    // 2. 默认的普通的值不是响应式的, 需要用 reactive 函数
    const obj = reactive({
      name: 'zs',
      age: 18
    })

    return {
      obj
    }
  }
}
</script>

总结： 通常是用来定义响应式 对象数据

ref 函数

reactive 处理的数据, 必须是复杂类型, 如果是简单类型无法处理成响应式, 所以有 ref 函数!

ref 函数作用: 对传入的数据（一般简单数据类型），包裹一层对象, 转换成响应式。

特点

ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value

在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值

在模板中, ref 属性会自动解套, 不需要额外的 .value

ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理

<template>
  <div>{{ money }}</div>
  <button @click="money++">改值</button>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  setup() {
    let money = ref(100)
    money.value++
    return {
      money
    }
  }
}
</script>

ref 和 reactive 的最佳使用方式：

明确的对象，明确的属性，用reactive，其他用 ref

setup语法糖

从vue3.2开始，支持setup语法糖。

script setup是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script 语法更加简洁

顶层的绑定会自动暴露给模板，所以定义的变量，函数和import导入的内容都可以直接在模板中直接使用

<template>
  <div>
    <h3>根组件</h3>
    <div>点击次数：{{ count }}</div>
    <button @click="add">点击修改</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const add = () => {
  count.value++
}

// 不再需要return {}
</script>

计算属性computed函数

computed函数调用时, 要接收一个处理函数, 处理函数中, 需要返回计算属性的值

<template>
  <div>我今年的年纪 <input type="text" v-model="age" /></div>
  <div>我明年的年龄 {{ nextAge }}</div>
  <div>我后年的年龄 <input type="text" v-model="nextAge2" /></div>
</template>

<script setup>
import { computed, ref } from 'vue'
const age = ref(10)
// 不带set的计算属性
const nextAge = computed(() => {
  return +age.value + 1
})

// 带set的计算属性
const nextAge2 = computed({
  get() {
    return +age.value + 2
  },
  set(value) {
    age.value = value - 2
  },
})
</script>

侦听器watch函数

watch监视, 接收三个参数

参数1: 监视的数据源
参数2: 回调函数
参数3: 额外的配置

// 监听单个ref
const money = ref(100)
watch(money, (value, oldValue) => {
  console.log(value)
})

// 监听多个ref
const money = ref(100)
const count = ref(0)
watch([money, count], (value) => {
  console.log(value)
})

// 监听ref复杂数据
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  user,
  (value) => {
    console.log('user变化了', value)
  },
  {
    // 深度监听，，，当ref的值是一个复杂数据类型，需要深度监听
    deep: true,
    immediate: true
  }
)

// 监听对象的某个属性的变化
const user = ref({
  name: 'zs',
  age: 18,
})
watch(
  () => user.value.name,
  (value) => {
    console.log(value)
  }
)

今天先到这儿，明天我们接着聊！

vue3基础篇（1）