一、属性侦听器
watch:{x(){}} 中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性
var vm=new Vue({
el:".box",
data:{
ten:0,
two:0
},
watch:{
ten(newvalue,oldvalue){
this.two=newvalue.toString(2)
},
two(newvalue,oldvalue){
this.ten=parseInt(newvalue,2)
}
}
})
面试题:
1、计算属性,属性侦听器,方法,过滤器有什么区别? 哪些是被this对象劫持过的?
答:计算属性-方法;
计算属性会把计算的结果缓存起来,并监听计算过的数据源 如果监听的数据源发生变化才会重新计算(没有监听的属性发生变化 模板会重新渲染)
方法一般是提供给模板事件和其他方法(比如钩子函数)使用,如果在模板中使用了方法,而且不是事件,如果模板中的渲染的任意数据源改变了 它都会重新调用
过滤器往往用于数据渲染前的数据处理 除了用法跟方法不一样其他都一样,它没有被劫持
属性侦听器:只有侦听的属性发生变化才会触发(可以深度侦听,但是更消耗内存)
2、为什么要把这些函数分开设计:计算属性、属性侦听器、方法、过滤器
答:为了业务更明显,功能更好调试
二、自定义指令
除了默认设置的核心指令( v-model 和 v-show 等),Vue 也允许注册自定义指令。
directives: {
bgc: {
inserted(el, option) {
el.style.backgroundColor = option.value
}
},
fontweight: {
inserted(el, option) {
el.style.fontWeight = option.value
}
}
}
三、生命周期函数
钩子函数 ==>生命周期函数(c语言中有一类系统回调的函数然后执行业务 叫做钩子函数)
在某一种条件成立的时刻,系统会去调用Vue中设定的函数,这些函数都叫做声明周期函数
先主要学习Vue组件中的8个,vm实例在创建到销毁的过程中会去调用的函数
1、beforeCreate() {}
(1)是否能做网络请求?
能做网络请求,因为这个函数在运行时XHR(XML HTTP Request)是可以访问并且去做AJAX请求的
(2)是否网络请求数据然后设置到数据源中?
不能设置到数据源中,因为这个钩子中,this还在创建
(3)这个在项目中干什么?
只要不是用于页面渲染的网络请求都可以
预加载图片:网页中同源加载的优化(同一个页面中img script src属性去请求资源)
(预加载工具、第三方工具的加载)
这个函数在运行时,vm正在创建中:劫持data,methods,也就是this对象中还不能访问到数据
2、created(){}
(1)能否网络请求?
能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
(2)能否网络请求数据 然后设置到数据源中?
可以设置到数据源中,因为这个钩子中 this已经创建完毕了
(3)这个在项目中干什么?
请求首屏数据
vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中
这个函数可以操作this对象了 但是无法操作DOM
3、beforeMount() {}
渲染前的操作
vm对象已经创建完毕,在挂载之前触发的钩子
这个函数可以操作this对象了,但是无法操作DOM
4、mounted() {}
vm已经挂载到页面了
请求首屏数据,请求时页面已经出来了
5、beforeUpdate() {}
数据源已经更新了,页面重新渲染前(并不是数据更新前)触发的钩子
这两个钩子中,不能网络请求新数据去更新 数据源,会导致死循环
6、updated() {}
页面已经重新渲染了触发的钩子
7、beforeDestroy() {}
vm对象销毁之前触发的钩子,this还在,可以做最后的操作
保存用户的行为配置文件:比如播放器的进度等等
8、destroyed() {}
后面在webpack环境下操作,无法操作this
往往把当前组件中计时器清除了,可以把body的滚动条滚到顶部
面试题:
1、什么是生命周期函数?
答:vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数
2、vue的命周期函数有哪些?
答:普遍的答法:有8个创建前后,挂载前后,更新前后,销毁前后
高级的答法:
组件的有8个(创建前后,挂载前后,更新前后,销毁前后)
自定义指令也有5个
动态组件有2个 -后面讲
路由(组件有3个,全局有2个,独享有1个) -后面讲
3、为什么设计生命周期函数?
答:为了更好的设计程序,让代码更有逻辑 和 可维护性
4、页面首次加载过程中,会依次触发哪些钩子
答:beforeCreate,created,beforeMount,mounted
5、this.$el 是什么?它在哪些钩子中才能访问?
答:它代表了当前组件的真实DOM,要在mounted之后才有
6、Vue 实例的 data 属性,在哪些钩子中能访问
答:created beforeMount mounted beforeUpdate updated beforeDestroy
7、为什么不要在更新钩子中做页面的数据请求?
答:会导致死循环 react有一个shoudComponentUpdate可以自己控制 但是vue没有
8、你用beforeCreate做过什么业务?
答:这个钩子中可以做网络请求 但是vm没有构建完毕,此时数据方法等等的劫持还没有完成,不能操作this,因此可以做预加载.
9、VM和DOM之间的关系?
答:(1)VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode. 它通过底层的render函数渲染到页面上,让页面DOM跟虚拟VNode关联映射.
(2)如果VM的数据源发生变化,会让内存中生成新的VNode 新的VNode会和旧的VNode作比较然后更新,这个过程就是DIFF算法
四、组件基础
1、全局组件: 组件的属性不能用大写字母,组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)
注册的组件不要跟系统标签同名
2、局部组件: 一个vm实例可以有多个局部组件,但是只能供当前vm实例使用
components:{
Box:{
template:`<div>
<div>显示</div>
<div @click="fn">{{tian}}</div>
<img :src="img">
<div :style="styobj">{{writer}}</div>
</div>
`,
data(){
return {
tian:"晴天",
writer:"佚名",
flag:true,
img:"https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/0494d572-4e2a-451a-94fb-9e5b37a3532b.jpg@!550",
styobj:{
color:"grey",
marginLeft:"100px",
}
}
},
methods: {
fn(){
this.flag=!this.flag
if(this.flag){
this.tian="阴天"
}else{
this.tian="晴天"
}
}
},
}
}