这是我参与「第五届青训营 」伴学笔记创作活动的第 18 天
常用的Composition API
初识setup
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="sayHello">click</button>
</template>
<script>
export default {
name: 'App',
setup(){
// 数据
let name = '张三'
let age = 18
function sayHello(){
alert('我叫${name}')
}
return{
name,
age,
sayHello
}
}
}
</script>
ref函数
响应式数据的修改
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="changInfo">click</button>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
// 数据
let name = ref('张三')
let age = ref(18)
function changInfo(){
name.value = '李四'
age.value = 48
}
return{
name,
age,
changInfo
}
}
}
</script>
reactive函数
vue3响应式的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
// 源数据
let person = {
name:"张三",
age:18
}
// 模拟vue3中的响应式的实现
const p = new Proxy(person,{
// 有人读取p的某个属性时调用
get(target, p, receiver) {
console.log(`有人读取了p身上的${p}属性`);
return target[p]
},
// 有人修改p的某个属性时调用，或者给p追加某个属性时调用
set(target, p, newValue, receiver) {
console.log(`有人修改了p身上的${p}属性,我要去更新界面了`);
target[p] = newValue
},
// 有人删除p的某个属性时调用
deleteProperty(target, p) {
console.log(`有人删除了p身上的${p}属性,我要去更新界面了`);
return delete target[p]
}
})
</script>
</body>
</html>
reactive对比ref
computed
vue2中的计算属性的实现
<template>
<h1>一个人的信息</h1>
姓<input text="姓" v-model="person.firstName" />
<br>
名<input text="名" v-model="person.lastName" />
<br>
<span>全名:{{fullName}}</span>
</template>
<script>
import {reactive} from "vue";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Demo",
computed:{
fullName(){
return this.person.firstName+'----'+this.person.lastName
}
},
setup(){
// 数据
let person = reactive({
firstName:'王',
lastName:'杰'
})
return {
person,
}
}
}
</script>
<style scoped>
</style>
vue3中计算属性的实现
<template>
<h1>一个人的信息</h1>
姓<input text="姓" v-model="person.firstName" />
<br>
名<input text="名" v-model="person.lastName" />
<br>
<span>全名:{{person.fullName}}</span>
</template>
<script>
import {computed, reactive} from "vue";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Demo",
setup(){
// 数据
let person = reactive({
firstName:'王',
lastName:'杰'
})
//计算属性-------- 没有考虑计算属性被修改的情况
// person.fullName = computed(()=>{
// return person.firstName+'---'+person.lastName
// })
//计算属性完整写法（考虑读和写）
person.fullName = computed({
get(){
return person.firstName+'-'+person.lastName
},
set(value){
let nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return {
person,
}
}
}
</script>
<style scoped>
</style>
watch和watchEffect
vue3生命周期
toRef和toRefs
用于将响应式对象中的某个属性提供给外部使用时。
