1. 介绍
Vue3的基本属性:
- 组合式API(Composition API):
组合式API是Vue3最核心的特性之一,它允许开发者将逻辑相关的选项组合在一起,提高代码的可维护性和可读性。组合式API主要体现在setup函数中,setup函数是一个新的组件选项,用于在组件创建之前执行一些逻辑。
- 响应式系统重构
Vue3对响应式系统进行了重构,使用Proxy重写,使得性能得到大幅提升。同时,Vue3还引入了ref和reactive两种新的响应式API,提供更灵活的响应式数据管理方式。
- 性能提升
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>
注:支持传入 对象类型和简单类型 的参数,返回响应式数据 — 推荐
使用说明:
- 在js中使用,需要带上
.value
,因为默认生成的响应式数据是对象,数据会封装到对象的value中- 在元素中访问,不需要带
.value
- 推荐使用ref函数
3.3 reactive 对比 ref
-
相同点:都是用来生成响应式数据
-
不同点:
-
reactive不能处理简单类型的数据
-
ref参数类型支持更好,但是必须通过.value做访问修改
-
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的第三个参数是一个对象,可以配置监听的选项
- 如deep(深度监听)、immediate(立即执行)和flush(回调的执行时机)。
- deep: true表示深度监听,即监听对象内部属性的变化。
- immediate: true表示立即执行,即在监听开始后立即执行一次回调。
- flush可以设置为’pre’或’post’,分别表示在组件更新之前或之后执行回调。
- 监听对象的一个属性变化
const user = ref({ name: '张三', age: 30 });
watch(() => user.value.name, (newValue, oldValue) => {
console.log(`用户名从 "${oldValue}" 变为 "${newValue}"`);
});
5.3 停止监听
watch会返回一个函数,调用这个函数可以停止监听。文章来源:https://www.toymoban.com/news/detail-816715.html
如下:文章来源地址https://www.toymoban.com/news/detail-816715.html
// 创建响应对象 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>
到了这里,关于vue3-基本属性更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!