Vue核心知识一览
- 生命周期
beforeCreate :
数据观测 和 初始化事件还未开始
created :
完成数据观测 , 属性和方法运算 , 初始化事件 , $el属性还没有显示出来
beforeMount :
render函数 首次被调用.
完成了 编译模板 , data中数据 结合 模板 生成了html虚拟对象.
但未挂载到页面上
mounted :
el属性 被 vm.$el 替换 , 并挂载到实例上之后调用.
使用内存中的html对象 替换掉 el属性指向的Dom对象.完成模板中的html渲染到html页面中.
此过程可以进行ajax操作.
beforeUpdate :
数据更新之前调用.
发生在虚拟dom重新渲染和打补丁之前.
可以在该钩子中 进一步更改状态 . 不会触发重新渲染的过程
updated :
数据更新导致的虚拟dom重渲染之后调用.
可以执行依赖于dom的操作.
避免更新状态 , 也就是用到 dom时 , 最好时读操作 , 因为有可能导致更新无限循环.
在服务器渲染期间不被调用.
beforeDestroy :
实例销毁前调用 . 即 还可以操作实例.
destroyed :
实例销毁之后调用 .
调用后 所有的事件监听器会被移除.
所有子实例被销毁.
在服务器渲染期间不被调用.
- 双向数据绑定
实现原理 :
数据劫持 + 发布者-订阅者 模式.
通过 Object.defineProperty() 来劫持各个属性的setter/getter .
在数据变动时,发布消息给订阅者,触发相应监听回调.
- 组件间参数传递
父子组件传值
父 -> 子 : 子组件通过props方法接受数据
子 -> 父 : $emit方法传递数据
非父子组件传值
eventBus : 事件中心 . 传递事件 , 接收事件 . 相当于中转站 .
项目比较小的时候 推荐使用.
- 路由
hash模式 和 history模式
hash模式 :
符号"#"及其后面的字符 所构成的字符串.
js通过 window.location.hash获取
hash不会包含在请求中传递.
history模式:
采用HTML5的新特性.
提供了 pushState() , replaceState() 对浏览器历史记录栈进行修改.
提供了 popState() 来监听转台的变更.
想用好 必须有后台的配置支持.
- 自定义指令
局部指令:
new Vue({
el:"#app",
data:{},
directives:{
dir_01:{
inserted(el){
console.log(el);
console.log(arguments);
}
}
}
});
全局指令:
Vue.directive('dir2',{
inserted(el){
console.log(el);
}
});
指令的使用 :
<div id="app">
<div v-dir_01 ></div>
<div v-dir2 ></div>
</div>
- 自定义过滤器
<div id="app">
<input type="text" v-model="msg" />
{{ msg | capitalize }}
</div>
局部过滤器:
new Vue({
el:"#app",
data:{
return {
msg : ''
}
},
filters:{
capitalize : function(value){
if(!value) return ''
return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);
}
}
});
全局过滤器:
Vue.filter('capitalize' , function(value){
if(!value) return ''
return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);
});
- keep-alive
keep-alive 是 Vue的一个内置组件 , 用以能避免重复渲染.
包含两个属性 : include , exclude . 其中exclude的优先级更高.
两个属性支持 正则,函数,数组等表达式.
多条件 用逗号 ',' 分隔.
- vue的计算属性
在模板中放入太多的逻辑会让模板难以维护.
对数据进行复制处理 , 且可能多次使用的时候 , 尽量采取计算属性方式.
优点 :
- 数据处理结构清晰
- 依赖于数据 , 数据更新 , 处理结果自动更新
- 计算属性内部this指向vm实例.
- 在template调用时,直接写计算属性名即可.
- 与methods相比:
-
- 当依赖的数据不变时,computed会从缓存中获取
- 而methods无论如何都会重新计算.
- 其他面试题
v-if 与 v-show 区别
v-if 条件判断 , v-show 操作css属性 display ( block 或 none).
v-show 性能更好.v-if 适用的情况更广.
vueJs的核心是 : 数据驱动 , 组件系统
vue 常用指令
v-if , v-for , v-bind , v-on , v-show , v-else
vue常用修饰符
.prevent : 提交事件不再重载页面
.stop : 阻止事件冒泡
.self : 当事件发生在该元素本身而不是子元素的时候触发
.capture : 事件监听, 当事件发生的时候调用.
v-on可以绑定多个方法.
vue等单页面应用的缺点:
- 不支持低版本,最低支持IE9
- 不利于SEO
- 第一次加载页面耗时相对长一些
- 不能使用浏览器导航按钮前进,后退. 需要自行实现逻辑.
