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

1.Vue的基本原理

时间:2023-04-11 21:37:07浏览次数:43  
标签: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/17307804.html

相关文章

  • (一)初始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�......
  • 【学习笔记】JS+VUE
    JSJS教程HTML定义了网页的内容CSS描述了网页的布局JavaScript控制了网页的行为简介1、什么是JS?JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后,可由所有的现代浏览器执行。2、JS有哪些作用?直接写入H......
  • 用quasar+vue3+组合式api 实现小米商城标题栏动画
    先来看一下小米商城标题栏动画:  小米商城标题栏动画主要特点:移入时二级菜单缓慢出现;移出时二级菜单缓慢消失;在一级菜单之间移动时,二级菜单内容直接切换,没有过渡效果。实现思路一、纯css实现(❌)首先肯定是考虑:hover,但是经过试验发现,:hover可以实现鼠标移入移出时的......