Vue3核心语法一

最新推荐文章于 2024-09-20 11:00:29 发布

*郑*

最新推荐文章于 2024-09-20 11:00:29 发布

阅读量457

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42202992/article/details/132866252

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

本文介绍了Vue3中的核心响应式特性，包括reactive用于深度响应式数据，shallowReactive的浅响应式，ref处理基本类型响应式，computed计算属性，watch监视属性变化，以及watchEffect处理副作用。同时讲解了如何在template中使用这些特性创建项目和组合式API的应用。

摘要由CSDN通过智能技术生成

Vue3核心语法一

使用Vue3创建项目template中标签可以多个根标签,可以通过setup开启组合式API,组合式API优点可以使相同业务放到一起

rective

定义响应式数据,

import { reactive} from "vue";

 const data= reactive({
   name: "孙悟空",
   age: 500,
   friends: ["猪八戒", "沙和尚"]
 });

shallowReactive

定义浅响应式数据,只有根数据是响应式

import { shallowReactive} from "vue";

 const data= shallowReactive({
   name: "孙悟空",
   age: 500,
   friends: ["猪八戒", "沙和尚"]
 });

ref

定义基本类型(简单对象)响应式数据,需要使用.value操作数据

import { ref } from "vue";

const count = ref(0)
function clickHandler(){
  count.value++
}

computed

定义计算属性

import { computed } from 'vue'
const content = ref('测试内容');
const getLen = computed(() => {
  console.log("计算属性执行了")
  return content.value.length
})

watch

监视属性

监视响应式对象或ref响应式数据

import { watch} from 'vue'
cosnt count = ref(0)
watch(count,(newValue,oldValue) => {
  console.log(newValue,oldValue)
})

监视对象中属性

 const data= reactive({
   name: "孙悟空",
   age: 500,
   friends: ["猪八戒", "沙和尚"]
 });
 //监视age
 watch(() => data.age,(newValue,oldValue) => {
 	console.log(newValue,oldValue)
 })

watchEffet

副作用函数,如果函数内部用到的响应式数据变动,函数体就会自动执行

import {ref,watchEffect} from 'vue'
const count = ref(0)
function clickHandler(){
	count.value++
}
watchEffect(() => {
  console.log("副作用函数执行了")
  console.log('count: '+count.value)
})