vue学习区

用派发器做一个TodoList 组件书写 书写派发器 上述代码如下图所示: 用派发器做一个TodoList 组件书写 书写派发器 上述代码如下图所示:

不用派发器的目录如下 index.vue CalResult.vue CalInput.vue CalButton.vue 用派发器进行改造 接下来就是使用了 先对组件进行改造一下, todo部分就是

vue2组件设计和派发器 抽离合适的部分不让method变得臃肿 type -> 事件 -> 逻辑 -> type -> 派发器 -> 数据更改 组件化设计 由外到内 页面组件 块组件 -> 组件出口

入口文件 生命周期挂在render方法 lifecycle/index.js render转vnode vdom/index.js 实现功能文件 vdom/vnode.js 打补丁挂载页面 vdom/

分析流程 模板文件 index.html 模板编译文件的入口文件 compile/index.js 遍历成render函数的处理文件 处理的给是如下 (ctrl+f) @9527 处

vue的模板编译的过程 获取template template -> AST树 AST树 -> render函数 render函数 -> 虚拟节点 设置patch -> 打补丁到真实的DOM 思路 i

入口文件 index.js 初始化文件 init.js 初始化状态 initState.js 数据劫持 observer/index.js 数组的劫持 总结 Vue原型上添加init方法 vm赋值th

劫持方法的文件 observer/index.js 数组劫持文件 observe/arr.js暗室逢灯分示范点发射点发撒

入口文件 index.js 初始化文件 init.js 初始化状态 initState.js 数据劫持 observer/index.js

项目初始化 rollup安装 babel: es6 -> es5 rollup-plugin-babel -> rollup 和 babel产生关联 配置rollup rollup.config.js

简单实现v-if&&v-show&&生命周期 这里的事件我默认用的是click事件了简单实现v-if&&v-show&&生命周期 这里的事件我默认用的是click事件了

响应式原理实现响应式原理实现响应式原理实现响应式原理实现响应式原理实现响应式原理实现响应式原理实现响应式原理实现响应式原理实现

```js ``` ```js ``` >都是进入页面时候得情况 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f5a

使用元素 input textarea select checkbox radio v-model在input框是 input方法 和 value属性的一个语法糖 select value属性 和 c

具名slot 用于有多个插槽，区分占位用的 写法: 父组件一般用 template标签包裹，添加v-slot:age -> 缩写 #age 默认插槽 其实也是 v-slot:default 子组件预留

插槽 slot 内容占位标签 slot 可以替换为普通文本，html，组件等 一般的slot之间的内容是默认值 带loading的button 初始状态 loading状态

v-model既可以用作表单元素,也可以用在自定义组件，无论那种情况,它都只是一个语法糖而已,最终会生成一个属性和一个事件 当用于表单元素的时候,vue会根据作用的表单元素类型生成合适的属性和事件 如

①props -> 父子组件之间通信 ②event -> 当子组件发生某些事，可通过event通知父组件 ③style和class以及attribute(data-) 注意子组件可以通过inherit

有时候数据过大，会导致页面渲染过慢占用cpu过多，所以需要对数据进行处理 ：处理方式就是在固定的高度的容器中展示可见的数据，通过控制滚动条来修改数据