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: ["猪八戒", "沙和尚"]});//监视agewatch(() => 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)
})