Vue监视属性

news2025/1/12 15:44:11

1,click事件的属性可以些什么?

答:click即@click="xxx",其中xxx可以是一个methods方法,也可以是一些简单的语句,比如i++,i<0?250 : 520。即@click="add;i++,i<0?250 : 520"

 2,监视属性的定义?

答:当一个属性被监视了,就叫做监视属性。目的是看这个属性的值有没有改变,如果改变了就执行一些回调函数。

3,Vue底层是如何实现属性监视的?

答:数据代理和劫持,在 Vue 中,监视属性的底层实现是通过 Object.defineProperty() 方法来实现的。该方法可以对对象的属性进行劫持,从而实现对属性的监视。 当组件中的属性值发生变化时,Vue 会自动触发相应的 setter 函数,并通知相关的 Watcher 对象,从而触发相应的回调函数。这样就实现了对属性变化的监听和响应。总结:在setter方法中去调用回调函数即可。

 4,添加监视属性?

答:实例化Vue实例对象时,传入watch配置项对象即可。这个对象里面的属性固定为handler,是一个回调函数,他的this默认指向Vue实例对象。下面代码中,当d1发生变化就回去指向handler回调函数。handler函数有两个默认参数,表示该属性的原来值和修改新值。immediate属性表示这个回调初始化时是否会自动执行,而不用去等待事件的发生。

vm = new Vue({
    data:{
        d1:520
          },
    watch:{
        immediate:flase,
        d1:{handler(newValue,oldValue){log(250)}}
           }
})

5,Vue可以监视哪些属性?

答:配置属性(data)和计算属性(compoted)都可以被监视。 注意:不存在的属性也可以被监视且不会报错。

6,使用vm.$watch方法进行属性监视?

答:vm.$watch("属性名称",指定回调函数) ,这里的属性名称需要加引号,要不然解析引擎会把它当作全局变量处理,实际上这个属性挂在vm身上。

7,深度监视?

答:当监视的属性指向一个容器类型时,如对象、数组等,容器里面的数据改变时能够被监视到则叫做深度监视。 watch配置项对象里面有一个deep属性,默认为false,表示Vue默认支持深度监视,但是watch里面把默认把这个功能关闭了,需要程序员自己决定是否打开。

8,监视的简写形式?

答:当不使用immediate和deep配置项时,可以简写。

vm = new Vue({
    data:{
        d1:520
          },
    watch:{
        //d1就是监视属性
        d1(newValue,oldValue){log(250)}
           }
})

9,监视属性与计算属性的区别?

        答:监视属性支持内嵌异步函数,如timeout()函数 。而计算属性依靠的是函数的返回值,且js目前无法实现sleep(线程挂起)的功能,即无法暂停一段时间再将值进行返回,所以计算属性无法使用定时器函数。

        所以如果需要定时器函数等异步函数,则必须使用监视属性。

        而且监视属性里面的定时器函数timeout()的回调函数参数必须是一个箭头函数,因为这个定时器函数timeout()不受Vue管理,它由JS引擎异步管理模块进行处理,导致定时器函数timeout()的this永远由浏览器指定为window,所以这个回调函数不能写成普通函数(普通函数的this与定时器一致为window,导致无法读取Vue的数据)。使用箭头函数的原因是,由于箭头函数没有自身的this指向,他会自动向它所属上一级进行寻找,而他的上一级恰好是Vue的this,所以能够使用Vue的数据,注意:箭头函数和timeout是同一级的。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/561078.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】---堆排序:时间复杂度高于(N*logN)的排序别来沾边

文章目录 前言&#x1f31f;一、建堆的两种方式&#xff1a;&#x1f30f;1.1 向上调整建堆(堆排序)&#xff1a;&#x1f4ab;1.1.1 完整代码&#xff1a;&#x1f4ab;1.1.2 流程图(以小堆为例)&#xff1a;升序&#xff1a;建大堆&#x1f4ab;1.1.3 流程图(以小堆为例)&…

数码港元≠港元稳定币,为何被视为法币与虚拟资产间的骨干和支柱

出品&#xff5c;欧科云链研究院 作者&#xff5c;Jason Jiang 临近6月&#xff0c;香港在虚拟资产与Web3领域愈加活跃。据彭博社报道&#xff0c;香港将宣布散户投资者可以根据其新的行业规则交易加密货币&#xff0c;预计个人投资者从6月开始在适当的保障措施下可以交易BTC…

Go Web下gin框架的模板渲染

〇、前言 Gin框架是一个用于构建Web应用程序的轻量级Web框架&#xff0c;使用Go语言开发。它具有高性能、低内存占用和快速路由匹配的特点&#xff0c;旨在提供简单、快速的方式来开发可扩展的Web应用程序。 Gin框架的设计目标是保持简单和易于使用&#xff0c;同时提供足够的…

利用ChatGPT来学习Power BI

学习Power BI&#xff0c;或者说学习微软的相关产品的时候&#xff0c;最讨厌的就是阅读微软的官方文档&#xff0c;写的真的太硬了&#xff0c;有时候实时是啃不动&#xff0c;只能说不愧是巨硬。 但是&#xff0c;我们现在有AI帮忙了啊&#xff0c;ChatGPT3都通过了谷歌L3工…

达利欧《原则》拆书笔记(二)

什么是原则&#xff1f; 原则是应对现实、实现你人生愿望的方法。 假如没有原则&#xff0c;我们将被迫逐一考虑多种类型的事情&#xff0c;主动去应对&#xff0c;就像第一次经历这些事。相反&#xff0c;假如我们把每件事都看作“同一类型事物的又一个表现”&#xff0c;以…

【SpringCloud组件——Feign(远程调用)】

前言&#xff1a; 我们在使用Nacos和Eureka的时候都需要使用远程调用开关RestTemplate发送http请求&#xff0c;但是这种方式在代码编写层面太不优雅了&#xff0c;因此我们可以采用Feign来代替RestTemplate发送http请求。 注&#xff1a;此小节同样使用订单系统和用户系统作…

VXLAN技术了解

VXLAN是使用隧道技术的封装协议&#xff0c;常用于在物理层之上创建overlay网络&#xff0c;赋能虚拟网络。同时支持数据中心网络的虚拟化&#xff0c;并通过提供必要的分段满足多租户的需求。 优势在于 可伸缩性和灵活性&#xff1a;理论上可以使用1600万xlans&#xff0c;但…

读书笔记——《when breath becomes air》《超越自卑》

为啥要两本书一起写读后感&#xff1f; 读完这两本书本来应该分开来写点东西的&#xff0c;不过我认为这两本书应该写不了太多内容。虽然我也看了几本英文原著&#xff08;也写了点东西&#xff09;&#xff0c;但是我明显低估了《when breath becomes air》的难度&#xff0c…

SpringBoot学习之集成JWT(二十八)

一、什么是JWT WT (全称:Json Web Token)是一个开放标准(RFC 7519),它定义了一种紧凑的、自包含的方式,用于作为 JSON 对象在各方之间安全地传输信息。该信息可以被验证和信任,因为它是数字签名的。 比如我们常见的登录流程如下: 流程描述一下: 用户使用账号、密码登…

机器学习-3 K最近邻算法

K最近邻算法 算法概述分类什么是分类&#xff1f;分类需要什么&#xff1f; k近邻&#xff08;KNN&#xff09;分类 KNN算法关键问题k近邻模型的两个关键问题相似性度量——欧氏距离K值的选取 KNN算法流程算法原理算法步骤 数据标准化离差标准化数据标准差标准化数据小数定标标…

文献阅读-A Survey on Transfer Learning

期刊会议&#xff1a;IEEE TRANSACTIONS ON KNOWLEDGE AND DATA ENGINEERING 时间&#xff1a;2010 级别&#xff1a;CCF A 1、为什么需要迁移 许多机器学习和数据挖掘算法的一个主要假设是&#xff0c;训练数据和未来数据必须在相同的特征空间中&#xff0c;并且具有相同…

CSS的z-index属性

之前以为z-index越大&#xff0c;它的层级就越高&#xff0c;从我遇到的bug来看很显然不是这样。重新回顾一下z-index的知识&#xff1a; 1、z-index只对定义了position属性的&#xff0c;且属性值是非static元素有效。它的默认值是auto&#xff0c;auto的意思是游览器自动进行…

配置工具篇(tmux+ranger+lazygit)

Tmux 简介 官网解释&#xff1a;tmux是一个终端多路复用器&#xff1a;它允许在单个屏幕上创建、访问和控制多个终端。tmux可以从屏幕上分离出来&#xff0c;继续在后台运行&#xff0c;然后再重新连接。 此版本在Open BSD、Free BSD、Net BSD、Linux、mac OS和Solaris上运行…

数据结构 --- 堆

1、堆的基本概念 之前在学习优先级队列的时候&#xff0c; 学习到了堆的概念&#xff0c;现在重新回忆一下&#xff1a; 堆在逻辑上&#xff0c;是一颗完全二叉树堆在物理上&#xff0c;是存储在数组中的任意根节点值>子树节点值&#xff0c;叫做大顶堆。任意根节点值<…

学习RabbitMQ高级特性

目标&#xff1a; 了解熟悉RabbitMQ的高级特性 学习步骤&#xff1a; 高级特性主要分为以下几点, 官网介绍 1、消息可靠性投递 【confirm 确认模式、return 退回模式】 2、Consumer ACK 【acknowledge】 3、消费端限流 【prefetch】 4、TTL过期时间 【time to live】 5、死信队…

SQL注入 - Part 3(带外)

1、DNSLog注入 &#xff08;一种注入新思路&#xff09; 可以看到DNS的解析日志中包含了用户名。 基于此原理&#xff0c;可以手工构造注入点&#xff0c;让DNSlog显示库名、表名等&#xff0c;也可以使用自动化脚本Dnslogsqlinj进行获取。 2、SQL注入的防御 基于关键字&…

rollup打包react组件

这次主要简单实现用rollup打包react组件&#xff0c;组件的话简单写了一个弹窗组件&#xff0c;效果如下&#xff1a; 点击打开弹框&#xff0c;点击关闭按钮关闭弹框 首先创建react项目&#xff0c;这边还是用mfex-project脚手架创建 mfex-project create react-demo 然后编…

Linux·深入理解IO复用技术之epoll

目录 1.写在前面 2.初识复用技术和IO复用 3. Linux的IO复用工具概览 4. 初识epoll 5. epoll的底层细节 6.LT模式和ET模式 7.epoll的惊群问题 1.写在前面 今天一起来学习一下高并发实现的的重要基础&#xff1a;I/O复用技术 & epoll原理。 通过本文你将了解到以下内容…

【JavaScript】ES6,Proxy,Reflect,Promise,生成器,async/await

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 ES6模板字符串&#xff0c;标签模板字符串函数的默认参数函数的剩余参数剩余参数和arguments有什…

为什么要学习C++软件调试技术?掌握调试技术都有哪些好处?

目录 1、为什么要学习C软件调试技术&#xff1f; 1.1、IDE调试手段虽必不可少&#xff0c;但还不够 1.2、通过查看日志和代码去排查异常崩溃问题&#xff0c;费时费力&#xff0c;很难定位问 1.3、有的问题很难复现&#xff0c;可能只在客户的环境才能复现 1.4、开发联调工…