糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

【Vue3】setup函数的注意事项以及watch监视属性的六种情况

【Vue3】setup函数的注意事项以及watch监视属性的六种情况

原创 新闻资讯

于 2023-08-27 12:52:03 发布

16165 浏览

一.  setup须知

1.1setup的执行时间

1.setup的执行时间要比beforCreate执行要早


1.jpg

export default {
    name: "Demo",
    beforeCreate(){
      console.log('beforeCreate已执行');
    },
    setup() {
      console.log('setup已执行');
      let person = reactive({
        name: "小明",
        age: 20,
      });
      return {
        person,
      };
    },
  };


1.2.steup参数

setup的参数

1.props: 值为对象,包含: 组件外部传递过来,且组件内部声明接收了的属性


2.context:上下文对象

①attrs:值为对象,包含: 组件外部传递过来,但没有在props配置中声明的属性,相当于 

this.$attrs
 export default {
    name: "Demo",
    props:['msg','age'],
    setup(props) {
      console.log(props);
      let person = reactive({
        name: "小明",
        age: 20,
      });   
      return {
        person,
      };
    },
  };


2.jpg


②slots: 收到的插槽内容,相当于

this.$slots

在App中定义插槽

<template v-slot:qwe>
<span>123</span>
</template>
<template v-slot:ewq>
<span>321</span>
</template>

在子组件中获取到插槽

console.log(context.slots); // 得到插槽


3.jpg


③emit: 分发自定义事件的函数,相当于

this.$emit

在App中写一个自定义事件并且传给组件

<Demo @hi="Hello" msg="山鱼" age=10>
</Demo>
 setup() {
    function Hello(){
      console.log('你好!');
    }
    return {
      Hello
    }
  }

然后去到子组件使用context.comit获取到自定义事件

4.jpg

 function point(){
        context.emit('hi',666)
      }     
5TgxPT2v-1681788304084)]

```js
 function point(){
        context.emit('hi',666)
      }

与Vue2中的computed配置功能一致

import { reactive,computed} from "vue";
  export default {
    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){
          const arr = value.split('-')
          person.firstName = arr[0]
          person.lastName = arr[1]
        }
      })
      return {
        person,
      };
    },
  };


二.  watch监视属性

有两种watch,分别是单个属性数据监视,和多个属性数据监视

watch中的三个参数分别为,监视的对象,监视的函数,监视属性的配置

监视ref所定义的数据

①监视属性监视ref的一个响应式的值

  watch(sum, (newvalue, oldvalue) => {
      console.log('当前值为'+newvalue, '以前值为'+oldvalue);
    });

②监视ref所定义的多个响应式数据

   watch([sum,msg], (newvalue, oldvalue) => {
      console.log('当前值为'+newvalue, '以前值为'+oldvalue);
    });

监视reactive所定义的数据

①监视reactive定义的数据的变化

使用reactive定义的数据无法使用watch正确的获取newValue

并且会强制开启深度监视

   watch(person,(newValue, oldValue) => {
                console.log('person变化了',newValue,oldValue)
             })

②监视reactive所定义的响应式数据的某个属性

 watch(()=>person.name,(newValue,oldValue)=>{
               console.log('person.name发生了变化',newValue,oldValue)
           })

③监视reactive所定义的响应式数据的某些属性

watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{
                console.log('person.name发生了变化',newValue,oldValue)
            })

④特殊形况

注:该情况监视的是recative所定义的对象中的某个属性,所以deep可以开启

 watch(()=>person.job,(newValue,oldValue)=>{
                console.log('person.name发生了变化',newValue,oldValue)
            }, {deep: true})

Vue3

web前端

网站开发

小程序开发

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情