春风得意马蹄疾
一日看尽长安花

Vue3.0语法

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),需要写成函数获取的形式。
Like
Like Love Haha Wow Sad Angry
53
赞(2) 打赏
未经允许不得转载:栗子纪blog » Vue3.0语法
分享到: 更多 (0)
3 2 votes
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x