首页 > 其他分享 >Vue的基本原理

Vue的基本原理

时间:2022-10-14 14:57:27浏览次数:72  
标签:订阅 劫持 Vue 基本原理 绑定 object defineProperty

创建vue实例,会遍历data中的属性,由object.defineProperty将其转为getter和setter,并追踪其依赖,当属性被访问或发生改变时会通知相应的watcher程序段在组件渲染的过程钟将其标记为依赖,之后当依赖项的setter被调用时会通知相应的watcher程序重新计算使得组件发生改变。

双向绑定: 数据劫持+发布订阅模式,数据劫持利用object.defineProperty劫持对象的访问器,属性变化我们获取变化,发布订阅模式发布者和订阅者互不知道对方,发布者发布到订阅器中,订阅者订获取阅器中的内容。

object.defineProperty对于数组而言大部分操作时拦截不到的,只能通过函数重写解决

  • v-on 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
  • v-bind 动态绑定 作用: 及时对页面的数据进行更改, 可以简写成:冒号
  • v-slot: 缩写为#, 组件插槽
  • v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
  • v-show 显示内容
  • v-if 显示与隐藏
  • v-else 必须和v-if连用 不能单独使用 否则报错
  • v-text 解析文本
  • v-html 解析html标签

Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.


标签:订阅,劫持,Vue,基本原理,绑定,object,defineProperty
From: https://www.cnblogs.com/sunzihui/p/16791572.html

相关文章

  • vue 全局过滤器
     官网是这样描述的“Vue.js允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从2.1.0+开始支持)。过......
  • vue 实现动态columns,通过后台数据库存储字段,不同的表显示不同的列
    问题:vue前台定义columns太麻烦,每次需要手工定好列,如何通过数据库预留列字段,填充到前台columns中<h-tableautoHeadWidth="true"notSetWidth="true":columns="......
  • vue项目提高性能
    如何提高页面性能?精灵图、字体图标、图片懒加载或使用base64格式图片css,js文件压缩,代码复用,组件化使用CDN网络托管数据懒加载:分页,按需加载(下拉加载)......
  • uniapp-vue3-ts实现 微信小程序-视频上下滑动
    公司需求,后端被迫学习...临时记录一下后续完善暂时不会组件式开发,只能采用选项式了<template><viewstyle="color:white;"><viewclass="swiper">......
  • Vue-数据代理
    Vue中的数据代理数据代理定义所谓数据代理,就是通过一个对象代理对另一个对象中的属性的操作(读/写)。说白了就是操作一个对象上的属性可以读取和修改另一个对象上的属性,......
  • vue-utils__工具类函数
    vue-utils__工具类函数1.is判断consttoString=Object.prototype.toString;/***@description:判断值是否为某个类型*/exportfunctionis(val,type){ ret......
  • 前端成神之路-vue前端工程化
    1.模块化的分类A.浏览器端的模块化1).AMD(AsynchronousModuleDefinition,异步模块定义)代表产品为:Require.js2).CMD(CommonModuleDefinition,通用模块定义)......
  • Vue代码规范
    目录Vue代码规范简洁汇总函数方法常用动词汇总结构化规范目录文件夹及子文件规范vue文件基本结构元素规范元素特性的顺序组件选项顺序详细Vue代码规范好文推荐Vue代码规......
  • vue+elementui+axios环境搭建
    1.去官网下载安装node.js,安装后用命令检测版本信息node-vnpm-v2.安装vue环境#安装淘宝npmnpminstall-gcnpm--registry=https://registry.npm.......
  • 利用a标签实现文件下载功能(ant design vue可用)
    #利用a标签实现文件下载功能(antdesignvue可用)##代码和注释```letfileUrl=“”//所下载文件的网络地址letfileName=“”//下载成功后保存的文件名//创建一个a标......