vue3-基本属性更新

1. 介绍

Vue3的基本属性：

1. 组合式API（Composition API）：

组合式API是Vue3最核心的特性之一，它允许开发者将逻辑相关的选项组合在一起，提高代码的可维护性和可读性。组合式API主要体现在setup函数中，setup函数是一个新的组件选项，用于在组件创建之前执行一些逻辑。

2. 响应式系统重构

Vue3对响应式系统进行了重构，使用Proxy重写，使得性能得到大幅提升。同时，Vue3还引入了ref和reactive两种新的响应式API，提供更灵活的响应式数据管理方式。

3. 性能提升

Vue3在性能方面进行了全面优化，包括但不限于：虚拟DOM的优化、编译器的优化、响应式系统的优化等。根据官方数据，Vue3的性能提升达到了2倍以上。

2. 语法糖

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

<template>
 <div></div>
</template>

<style>
</style

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

3. 响应式数据 - reactive和ref函数

3.1 reactive

• 接受对象类型数据的参数传入，并返回一个响应式的对象

<script setup>
 // 导入
 import { reactive } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.msg = 'this is new msg'
 }
</script>

<template>
  {{ state.msg }}
  <button @click="setState">change msg</button>
</template>

注：仅支持传入 对象类型的参数，返回响应式数据

3.2 ref（推荐）

• 接收简单类型或者对象类型的数据传入并返回一个响应式的对象

<script setup>
 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>

<template>
  <button @click="setCount">{{count}}</button>
</template>

注：支持传入 对象类型和简单类型 的参数，返回响应式数据 — 推荐

使用说明：

1. 在js中使用，需要带上.value，因为默认生成的响应式数据是对象，数据会封装到对象的value中
2. 在元素中访问，不需要带.value
3. 推荐使用ref函数

3.3 reactive 对比 ref

• 相同点：都是用来生成响应式数据

• 不同点：

  1. reactive不能处理简单类型的数据

  2. ref参数类型支持更好，但是必须通过.value做访问修改

  3. ref函数内部的实现依赖于reactive函数

4. 计算属性 - computed

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

如下：使用

<script setup>
  // 导入
  import {ref, computed } from 'vue'
  // 原始数据
  const count = ref(0)
  // 计算属性
  const doubleCount = computed(()=>count.value * 2)

  // 原始数据
  const list = ref([1,2,3,4,5,6,7,8])
  // 计算属性list
  const filterList = computed(() => list.value.filter(item => item>2))
</script>

5. 监听器 - watch

在 Vue 3 中，watch 依然是一个用于监听数据变化并执行相应操作的功能

5.1 监听基本类型或ref

const number = ref(0);
watch(number, (newValue, oldValue) => {
  console.log(`新值： ${newValue}, 旧值：${oldValue}`);
});

5.2 监听复杂类型

• 监听整个对象属性变化

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
	const user = ref({ name: '张三', age: 30 });
  // 2. 调用watch 侦听变化
  watch(user, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },{
    deep: true, // 深度监听，即监听对象内部属性的变化。
    immediate: true // 立即执行一次
  })
</script>

注：watch的第三个参数是一个对象，可以配置监听的选项

1. 如deep（深度监听）、immediate（立即执行）和flush（回调的执行时机）。
2. deep: true表示深度监听，即监听对象内部属性的变化。
3. immediate: true表示立即执行，即在监听开始后立即执行一次回调。
4. flush可以设置为’pre’或’post’，分别表示在组件更新之前或之后执行回调。

• 监听对象的一个属性变化

const user = ref({ name: '张三', age: 30 });
watch(() => user.value.name, (newValue, oldValue) => {
  console.log(`用户名从 "${oldValue}" 变为 "${newValue}"`);
});

5.3 停止监听

watch会返回一个函数，调用这个函数可以停止监听。

如下：

// 创建响应对象 user
const user = ref({ name: '张三', age: 30 });
// 监听
const stopWatcher = watch(() => user.value.age, (newValue, oldValue) => {
  console.log(`年龄从 "${oldValue}" 变为 "${newValue}"`);
});
// 修改年龄
const updateUser = () => { user.value.age++ }

<template>
 <button @click="updateUser">增加年龄</button>
 <button @click="stopWatcher">停止监听</button>
</template>