属性侦听器、自定义指令、生命周期函数、组件基础

一、属性侦听器

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="晴天"
                        }
                        }
                    },
                }
            }