文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3 setup的注意点及watch监视属性的六种情况分析

2023-05-16 20:55

关注

一,setup须知

1.1setup的执行时间

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

  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,
      };
    },
  };

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

在App中定义插槽

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

在子组件中获取到插槽

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

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

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

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

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

 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({
        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 setup的注意点及watch监视属性的六种情况分析的文章就介绍到这了,更多相关vue3 watch监视属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯