vue学习随笔

v-if和v-show的区别

v-if和v-show都能控制元素的显示与隐藏

它们的区别主要表现在:

v-if是通过控制元素的有无来控制元素的显示与隐藏,当v-if的值为false时,直接将该元素从dom树中移除,相当于元素"不存在"

v-show本质是通过元素的display来控制显示与隐藏的,当使用v-show隐藏元素时,该元素其实还是存在于页面中的,只是"看不见"而已

v-for中key属性的作用

当v-for中有key属性时,

如果页面更新时根元素没有发生变化,

会对key进行比较,尝试就地更新

更新是以打补丁的形式进行的,这样性能会比较高

vue中的data为什么是function

函数拥有独立的作用域,

将data数据定义到函数中,可以有效的防止命名污染

同时也有助于更好的实现组件化

vue中双向绑定的原理

使用了MVVM设计模式

根据数据的变化更改页面:使用defineProperty对属性的方法进行劫持,可以监听到属性值发生的变化,并修改页面

操作页面修改数据:给表单元素添加监听,当操作表单时,获取到新的值,将数值保存起来

keep-alive的作用

每次切换组件时,都会重新创建,销毁组件

可以将组件缓存起来,以避免这种情况,提高用户体验

activated :当组件被激活时(进入页面)触发

deactivated:当组件失去激活状态(离开所在的页面)时触发

Vue的生命周期

共有四个生命周期:初始化,挂载,更新,销毁

初始化阶段

• 实例化对象
• 执行beforeCreate 生命周期钩子函数
• Vue内部添加data和methods等
• 执行created 生命周期钩子函数

挂载阶段

• 检查有没有template选项
  • 如果有,编译template
  • 如果没有,编译el或$mount对应标签作为template
• 执行beforeMount生命周期钩子函数
• 创建虚拟DOM,挂载到真实的DOM之上
• 执行mounted 生命周期钩子函数

更新阶段

当数据发生变化时执行操作

• 执行beforeUpdate生命周期钩子函数
• 对比数据差异,重新渲染虚拟DOM(以打补丁的形式,效率更高)
• 执行updated 生命周期钩子函数

销毁阶段

• 执行beforeDestro生命周期钩子函数
• 移除数据监视器,子组件和事件侦听器
• 执行destroyed 生命周期钩子函数

vue什么时候操作DOM比较合适

在mounted阶段后(包含),就能拿到真实的页面DOM了

如果子组件还未被加载,就获取不到,可以考虑使用$nexttick的延迟回调进行获取

发送网络请求在哪个函数

通常在created生命周期钩子函数中发起网络请求

因为那时DOM还未被创建

vue组件传值的方式

• 父向子传值:父组件在调用子组件的位置向子组件传值,子组件需要使用props进行接收
• 子向父传值: 由于单向数据流的限制,不推荐直接在子组件中修改父组件中的数据;推荐的做法是在父组件中绑定修改数据的事件和函数,子组件在恰当的时机调用父组件中的函数,以修改数据
• 跨组件通信EventBus:通常在当组件之间没有引用关系时使用,创建一个空白的vue对象,这个对象只负责监听和触发事件,在数据的传输方和数据的接收方都引入这个vue对象,并定义事件,传输数据
• 使用第三方包:使用vuex这种组件通信工具实现跨组件传值

vue中修改数组内索引的值,数据不更新的处理方式

• 可以使用splice来对数组进行修改
• 使用vue.set主动触发响应
• 调用$focusUpdate()强制重新渲染

Vuex

vuex是一个集中式状态管理工具

用于组件之间的数据通信

组件中的数据传输依然需要存储在data中

有三个组件:

• state:用于存储数据

• mutations:用于修改state,但是只能执行同步代码

• actions:可以执行异步操作,再将数据提交给mutaitions,用于修改数据