- 博客(17)
- 收藏
- 关注
RSS订阅
2转载 @vue/cli脚手架
@vue/cli的好处开箱即用0配置webpackbabel支持css, less支持开发服务器支持@vue/cli安装目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程yarn global add @vue/cli# ORnpm install -g @vue/cli@vue/cli 创建项目启动服务目标: 使用vue命令, 创建脚手架项目# vue和create是命令, vuecli-demo是文件夹名...
2022-03-06 09:55:12
69
原创 Vue注意事项2
Vue 中虚拟 dom 的原理是什么什么是虚拟 DOM虚拟 dom 就是将真实的 dom 节点，映射到 js 中，模拟成一个树形结构。真实 dom<div id="app"> <p class="text">hello</p></div>虚拟 dom{ tag: 'div', props: { id: 'app' }, children: [ { tag: 'p', pr
2022-03-05 15:47:58
144
原创 如何理解 Vue 的响应式系统？
官方文档如何追踪变化 vue 采用的是观察者模式-发布订阅模式 相似 , 是一种一对多的关系 vue 使用 Object.defineProperty 来设定 监听 data 中的数据，编写 getter 和 setter 的功能 vue 在解析 template,发现有视图在获取 data 中的数据，触发 getter， 会进行依赖收集, 会将渲染 watcher、计算属性 watcher、侦听器 watcher, 都收集到对应的 dep 中 当 data 中的 s.
2022-03-05 15:14:07
377
原创 Vue 双向绑定原理
vue2 使用的是 Object.defineProperty vue3 使用的是 proxy 通过对 data 中的数据进行劫持，添加 getter 和 setter，从而实现数据更新-视图更新。Object.defineProperty 作用 可以监听对象的某个属性，添加 getter 和 settter const obj = {};let name = '悟空';Object.defineProperty(obj, 'name', { get..
2022-03-05 15:10:31
47
原创 Vue 中的 key 作用
key 是为 Vue 中的虚拟 DOM 节点（vNode）标记唯⼀性的 id。key 的作用作用: 给虚拟 dom 添加标识, (优化复用对比策略, 优化渲染性能) vue 的更新机制 (差异化更新) 对比新旧虚拟 dom, 找出不同的部分, 进行更新视图 为什么对比虚拟 dom, 而不对比真实的 dom ? 真实的 dom 太复杂, 对比起来性能太差 虚拟 dom: 使用 js 对象的方式, 模拟真实的 dom 结构 { type: 'div', className:..
2022-03-05 14:42:56
162
原创 Vue 生命周期
生命周期的概念每个 Vue 实例(每个组件也都是一个 vue 实例)都有⼀个完整的⽣命周期： 开始创建 (空实例) 初始化数据 编译模版 挂载 DOM 渲染、更新数据 => 重新渲染 卸载 这⼀系列过程我们称之为 Vue 的⽣命周期。各个生命周期的作用生命周期 执行时机 beforeCreate 在组件实例被创建之初、组件的属性⽣效之前被调用 created 在组件实例已创建完毕。此时属性也已绑定，但真实
2022-03-05 14:38:45
43
原创 Vue 组件之间如何进行通信？
props (父传子)通过 props 将数据在组件树中进行⾃上⽽下的传递。<jack :money="count" :obj="myobj"></jack>//父组件传值money和objexport default { // props: ['money'] props: { //子组件props接收 money: { //接收money type: Number, default: 1, }, ob..
2022-03-05 12:17:25
111
原创 keep-alive 是什么?
keep-alive是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOMkeep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下props属性： include - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存 max - 数字。最多可以缓存多少组件实例 用法关于keep-aliv.
2022-03-05 10:17:16
528
原创 Vue注意事项
vue 中 data 为什么是一个函数，computed 和 watch 的区别是什么，v-show 和 v-if 的区别，v-if 和 v-for 的优先级,能否连用
2022-03-05 10:02:59
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人