首页 > 其他分享 >在vue中watch和created哪个先执行?

在vue中watch和created哪个先执行?

时间:2023-01-05 12:02:25浏览次数:38  
标签:vue created watch 监听器 执行 true 监听

 

 

官网的生命周期图中,init reactivity是晚于beforeCreate但是早于created的。
watch加了immediate: true,应当同init reactivity周期一同执行,会早于created执行。
而正常的watch,则是mounted周期后触发data changes的周期执行,晚于created。

1、immediate
watch 的一个特点是,默认最初绑定的时候是不会执行的,要等到值改变时才执行监听计算。
设置immediate为true后,被监听值初始化的时候就会执行监听函数,也就页面上的数据还未变化的时候。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

2、deep
当需要监听对象的改变时,此时就需要设置deep为true,不论其被嵌套多深,改变对象中的属性值能够触发监听,改变整个监听值也会触发。
deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
优化,我们可以是使用字符串形式监听。

标签:vue,created,watch,监听器,执行,true,监听
From: https://www.cnblogs.com/harryzong/p/17027140.html

相关文章

  • vue2 vue3 禁用F12控制台 打印渲染新内容 禁用右键等
    constdisabled=()=>{//console.log('禁止脚本,运行成功');constconfig={rightKey:false,//是否开启右键菜单controller:fal......
  • vue面试考察知识点全梳理
    一、简介vue几个核心思想:数据驱动组件化虚拟dom、diff局部最优更新源码目录介绍Vue.js的源码在src目录下,其目录结构如下。src├──compiler#编译......
  • 校招前端一面必会vue面试题指南
    写过自定义指令吗?原理是什么回答范例Vue有一组默认指令,比如v-model或v-for,同时Vue也允许用户注册自定义指令来扩展Vue能力自定义指令主要完成一些可复用低层级DOM操......
  • uniapp + vue 实现色弱测试小游戏
    最终的效果:点击色块中不同的色块,跳到下一关准备一些静态数据,放到js目录下,在vue文件中引入即可//在1到比1大的任意整数之间随机取一个整数exportconstgetRandom......
  • Vue3中操作子组件实例
    子组件Child.vue<template><hr/>{{INFO}}<hr/><button@click="changeInfo">changeInfo</button></template><scriptsetuplang="ts">import{ref,r......
  • vue本地头像实时更新
    代码template<divclass="form-group"><p><labelfor="avatar"><img:src="imageUrl"alt=""id="img"ref="img"style="width:100%;"></l......
  • Vue的生命周期
    1.beforeCreate:无法通过vm,访问data,和methods。2.created:可以通vm,访问data和methods的方法。3.beforeMount:(1).生成未经vue编译的DOM结构,        ......
  • 基于vue+Element Table 表格的封装
    项目场景:项目场景:需要频繁使用列表进行呈现数据,不可能每次都写一个表格,可以将表格封装为一个组件,在需要使用时可以直接调用。效果展示:项目结构:具体实现:Table.vue......
  • Vue项目创建
    一、创建项目1.安装淘宝镜像npmi-gcnpm--registry=https://registry.npm.taobao.org2.安装vue的脚手架工具npmi-gvue-cli3.测试vue-V4.初始化包结构vuein......
  • 52、监听器watch
    想要监听那个属性,就在watch中编写对应属性的方法即可<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"con......