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

1.Vue的基本原理

时间:2023-04-11 22:45:44浏览次数:39  
标签:Vue 基本原理 watcher 实例 组件 属性 setter

当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。  

标签:Vue,基本原理,watcher,实例,组件,属性,setter
From: https://www.cnblogs.com/chatgpt6/p/17308141.html

相关文章

  • Vue3快速上手
    Vue3快速上手1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次......
  • 1.Vue的基本原理
    当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用......
  • (一)初始vue
    data属性data属性是传入一个函数,并且该函数需要返回一个对象:在Vue2的时候,也可以传入一个对象在Vue3的时候,必须传入一个函数,否则报错data中返回的对象会被vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:所有我们在template或者app通过{{counter}},访问......
  • #yyds干货盘点 springboot和vue搭建前后端项目实现员工的增删改查
    前言我是歌谣今天继续带来前后端项目的开发上次已经开发了部门管理,今天继续开发员工管理后端第一步empcontroller代码packagecom.itheima.controller;importcom.itheima.pojo.Emp;importcom.itheima.pojo.PageBean;importcom.itheima.pojo.Result;importcom.itheima.s......
  • Vue动态创建组件实例并挂载到body
    方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops组件实例中的prop*/exportfunctioncreate(Component,props){constcomp=new(Vue.extend(Component))({propsData:props}).$mount()document.body.appendChild(......
  • 一个 OpenTiny,Vue2 Vue3 都支持!
    大家好,我是Kagol,OpenTiny 开源社区运营,TinyVue 跨端、跨框架组件库核心贡献者,专注于前端组件库建设和开源社区运营。今天给大家介绍如何同时在Vue2和Vue3项目中使用 TinyVue。TinyVue是一套跨端、跨框架的企业级UI组件库,支持Vue2和Vue3,支持PC端和移动端。......
  • vue3使用elmentui-plus中的图标
    按照官网这样直接引入使用,不知道为啥行不通:import{Document,MenuasIconMenu,Location,Setting,}from'@element-plus/icons-vue'使用时,需要<script>import{UserFilled}from'@element-plus/icons-vue'//使用的时候需要单独引入这个图标从......
  • vue项目中webpack编译glsl文件的配置
    1、 安装webpack-glsl-loader npminstallwebpack-glsl-loader2、修改vue.config.js配置,添加内容如下module.exports=defineConfig({configureWebpack:(config)=>{config.module.rules.push({test:/\.glsl$/,use:[......
  • vue3使用体验--用了之后再也不想用vue2
    0.个人推荐使用setup语法糖,看起来更加简洁。<scriptsetup>import{ref,reactive,onMounted}from'vue';constname=ref('李四');   //定义普通数据类型的响应式,获取/修改数据需要.value,在模板中不需要.value,可以直接使用onMounted(()=>{ //某些业务逻辑。 ......
  • Vue3 setup语法糖添加name属性
    1.安装插件vite-plugin-setup-extendnpmivite-plugin-setup-extend-D2.配置vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{defineConfig}from'vite'//引入插件并使用importvueSetupExtendfrom'vite-plugin-vue-setup-extend�......