setup函数
在Vue3.0中提出了Composition API的概念,Vue2.0中我们通过props、data、methods等来定义组件,在Vue3.0中我们使用setup定义响应式的数据和方法
例:
<template>
<button v-for="(item, key) in data.languages" :key="key" @click="selectLangFun(key)">{{item}}</button>
<p>你选择的课程是【{{selected}}】</p>
</template>
<script lang="ts">
import { reactive, ref} from "vue";
export default {
name: "ProgramSelect",
setup() {
const data = reactive({
languages: ["Java", "Javascript", "C#"]
});
const selected = ref("");
const selectLangFun = (params: number): void => {
selected.value = data.languages[params];
}
return {
data,
selected,
selectLangFun
}
}
}
setup(props,context)函数其实有两个参数,props对应Vue2.0中props,里面定义的父组件传递给子组件的变量;setup函数中没有暴露this,context对应于Vue2.0中this对象
所有在template模板中使用的变量都需要通过setup函数return 出去
通过reactive和ref来创建响应式的变量,两者的区别是reactive创建的是对象变量的响应式,而ref用来创建基本类型的响应式
ref创建的变量selected修改值的时候要加上value。Vue3.0内部会将简单类型如字符串'hello',动态转为一个对象,具有value属性,值是'hello'
所有在模板中要使用的数据、方法要return 出去
toRef 和 toRefs
上面我们介绍了reactive和ref 的一些基本使用,这里介绍toRef和toRefs使用技巧。部分代码会使用TS语法。
toRef
toRef()是一个函数,返回一个ToRef对象,使用语法是const result=toRef(target,'key')
ToRef对象并不是Ref对象,我们通过ref()函数创建的对象一定是响应式的数据,数据被修改了,会直接反映在页面上。
ToRef对象不一定是响应式的数据,这个要看target的数据是否是响应式的
target如果是响应式对象(reactive或者ref创建的对象)的话,那么result也是响应式对象
toRef()函数是对target的一种映射;result的内容修改的时候,target也会被修改,反过来也是一样的,target被修改了,result内容也会被修改
toRef()的设计初衷应该是想和Ref()函数类似,Ref()是将一个基础类型的变量进行响应式化(返回一个具有value属性对象),而toRef()则是从对象中剥离出属性来(返回一个具有value属性的对象),如果原始对象是响应式的,那么剥离出的属性也是响应式的,如果原始数据不是响应式,那么剥离出来的属性就是普通对象了,不具响应式的作用
toRefs
先思考一个问题:Proxy对象解构后是什么样子的呢
const target = {name: 'zs'};
const handler = {
get: function(obj, prop){
return prop in obj ? obj[prop]: 18
}
}
const p = new Proxy(target, handler)
const pp = {...p};
console.log(target, pp, p);
我们定义了p是Proxy对象,但是经过...解构之后的新对象pp已经不是Proxy对象了。反映到Vue3.0中,reactive()函数会返回Proxy响应式的对象,但如果直接解构reactive()创造的变量的话,那返回的数据也将不是Proxy对象了,导致其不具有响应式的特点了。toRefs()的出现解决了这份问题
toRefs()函数与toRef()很相似。toRef()剥离的是对象的某个属性,toRefs()剥离的是对象的所有属性,返回一个新对象
toRefs()函数用法是const result=toRefs(target);target的每个属性都会转换为ToRef对象。
同toRef()一样,如果原始数据target具有响应式的,那么result也是响应式;如果target是普通对象,那么result也是普通对象,不具有响应式。
由于toRef()函数返回的是一个对象,对象每个属性都是ToRef对象。我们知道...解构对象是浅拷贝,所以使用toRefs()函数,我们可以对响应式的数据进行解构。举个例子
<template>
<p>我是 {{name}},年龄{{age}} <button @click="change">change</button></p>
</template>
<script>
import {reactive, toRefs} from 'vue';
export default {
setup(){
const data = reactive({
name: "Willim",
age: 6,
change: ()=>{
data.age++;
}
})
return {
...toRefs(data)
}
}
}
</script>
computed
我们可以使用computed对响应式的变量进行处理,返回一个ComputedRef类型的变量
let doubleCount = computed(()=>{
return data.count * 2;
})
watch
Vue 3.0中的watch函数可以监听多个变量,监听某个变量变化时增加需要处理的逻辑(可以理解为这个变量变化的副作用);或者监听多个变量的变化,用法示例如下:
//监听一个变量
watch(selected, (newVal, oldVal)=>{
console.log("newVal", newVal);
console.log("oldVal", oldVal);
document.title = newVal;
});
//监听多个变量
watch([selected, ()=>data.count], (newVal, oldVal)=>{
console.log("newVal", newVal);
console.log("oldVal", oldVal);
document.title = newVal[0] +","+ newVal[1];
});
watch(arg,(newVal,oldVal)=>{}) 可以只监听一个响应式的变量arg,第二个参数是回调函数,当arg改变的时候,副作用的函数逻辑。newVal表示变量修改后的值,oldVal表示变量的旧值
watch([arg1,arg2,...],(newVal,oldVal)=>{})也可以监听多个响应式的变量 arg1、arg2 等,第二个参数是回调函数,当 arg1、arg2...任意一个改变的时候,副作用的函数逻辑。newVal 表示变量修改后的值,这个时候以数组的形式显示,与变量 arg1、arg2...一一对应;oldVal 表示变量的旧值,以数组的形式显示,与变量 arg1、arg2...一一对应
selected 是 ref 函数创建的变量,我们可以直接监听。
data 是 reacitve 函数创建的变量,我们只想监听某个属性(count),需要写成函数获取的形式。
VUE3.0
最新推荐文章于 2024-07-21 11:47:06 发布