Vue3核心语法一

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

rective

定义响应式数据,

import { reactive} from "vue";

 const data= reactive({
   name: "孙悟空",
   age: 500,
   friends: ["猪八戒", "沙和尚"]
 });
1
2
3
4
5
6
7

shallowReactive

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

import { shallowReactive} from "vue";

 const data= shallowReactive({
   name: "孙悟空",
   age: 500,
   friends: ["猪八戒", "沙和尚"]
 });
1
2
3
4
5
6
7

ref

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

import { ref } from "vue";

const count = ref(0)
function clickHandler(){
  count.value++
}
1
2
3
4
5
6

computed

定义计算属性

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

watch

监视属性

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

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

• 监视对象中属性

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

watchEffet

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

import {ref,watchEffect} from 'vue'
const count = ref(0)
function clickHandler(){
	count.value++
}
watchEffect(() => {
  console.log("副作用函数执行了")
  console.log('count: '+count.value)
})
1
2
3
4
5
6
7
8
9