李耀书

MVVM源码解析之Watcher监听关于watcher的监听，我觉得还是上一篇中的那张图比较明了实现Watcher监听 vm.$watch('child.someStr', function() { console.log(arguments); });watcher的第一次出现是在compile模板解析中，在模板解析中，Watcher中回调视图更新函数，在Observer()中，当数据发生变化，通知订阅者当数据发生改变，在watcher中监听，调用视图更新的函数，

Observer()Observe的第一次出现是在数据代理中[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1eFCmYmG-1620215805788)(D:\全栈学习\学习总结笔记\img\博客发文\Observe7.png)]首先：通过Observer给每个数据对象进行了递归遍历，包括子属性对象的属性，都加上setter和getter的方法，如果我们改变这个对象的值的话，就会触发setter，那么就能监听到数据的变化。源码以及注释解析function Obs.

源码解析之模板解析解析表达式解析普通指令解析表达式解析步骤：从文本节点中取出表达式从data中取出表达式对应的属性值将属性值设置为文本节点的textContent const vm = new MVVM({ el: "#app", data: { name: "aa" } });在源码中，判断当前节点是否存在{{}}，从而进行解析。通过正则进行匹配大括号表达式，匹配成功后，判断当前元素是否包含文本节点

源码解析之数据代理学习准备数据代理学习准备了解以下几点[].slice.call()：将arguments转为数组node.nodeType：判断节点类型了解Object.defineProperty是什么？理解：Object.hasOwnPropertyDocumentFragment文档碎片<ul id="liBox"> <li>[].slice.call(childNodes)</li> <li>Object.de

1、项目技术栈VueVue-RouterElement-UIAxiosEcharts2、项目初始化安装Vue脚手架通过脚手架创建项目(手动配置)路由配置配置Element-UI，安装[babel-plugin-component]，实现按需导入配置Axios实现Axios的发呢改装3、Element-UI的按需引入。在目录src下新建一个util文件夹，在util文件中新建一个elementUI文件。在main.js文件中导入。import './util/elemt'

共有这几种：路由守卫（导航守卫）：router.beforeEach：全局前置守卫。router.beforeResolve：全局解析守卫。router.afterEach：全局后置钩子。组件内守卫：beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由独享守卫：beforeEnter总结：导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用

首先组件时vue.js最强大的功能之一，而组件实例的作用的域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系如图所示A是父级、B是A的子级C和D的父级，C和D是兄弟关系，A和C、D是隔代关系。针对于不同的场景，我们可以使用不同的组件方式。第一种：父子组件传值1、父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量在子组件中通过props来接收数据，props可以是数组也可以是对象，接受的数据可以直接是props:['属性名']或prop

1、什么是Object.defineProperty()是vue2.0的基础语法，利用Object.defineProperty()能够实现数据的双向绑定Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。2、语法Object.defineProperty(obj, prop, descriptor)参数说明：obj：必需。目标对象prop：必需。需定义或修改的属性的名字descriptor：必需

官方定义：在下次DOM更新循环结束后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM面试总结​ Vue中DOM的更新采取的时候更新队列，Vue在观察到数据变化时候不是直接更新DOM，而是开启一个队列并缓冲在同一个事件循环中发生的所有数据改变。​ 虽然Vue推荐我们采用数据驱动但是有些时候我们仍然需要使用一些原生DOM操作，当数据改变后，DOM并没有更新，这个时候是获取不到最新的DOM对象的，nextTick就是让我们知道DOM是什么时候更新完成的，所以我

1、什么是keep-alive？keep-alive是vue的内置组件,而这个组件作用就是能够缓存不活动的组件，一般情况下，组件在进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么可以利用keep-alive来实现。简单的说就是：在vue项目中，难免会有列表页面或者搜索结果的列表页面，在点击某个结果之后，返回回来时，如果不对结果页面进行缓存，那么返回列表页面的时候会回到初始状态，但是我们想要的结果是返回是这个页面还是之前的搜索结果列表，这个时候就需要keep

vue中经常用v-表示一些指令，总结一下插入文本：v-text相当于元素的innerText属性，必须是双标签插入HTML：相当于元素的innerHTML属性循环遍历v-for的使用，除了item属性，还有一些其他辅助属性 在html中使用v-for指令进行渲染/* 普通数组 data:{ list:[1,2,3,4,5,6] } <p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}.

什么是公共组件，公共组件的使用场景项目中如果多个页面都显示有相同的区域内容，则该公共区域内容可以封装成公共组件进行使用。步骤：1、创建自定义公共组件，在src下的components目录中自定义创建需要的公共组件2、在main.js文件中将组件挂载到全局范围内。至于如何挂载…en。。。。。// 注册全局组件import mylist from './components/Home/MyList.vue'Vue.component('my-list', mylist)就这样，就可以了