关于Vue中一些重点问题的总结---基础篇

关于Vue中一些重点问题的总结—基础篇

生命周期钩子函数

↓ beforeCreate(使用频率较低)

• 在实例创建创建之前，data中的数据还拿不到

created(使用频率较高)

• 实例创建完成
• 能拿到data中的数据，能修改data中的数据
• 修改data中的数据不会触发updated、beforeUpdate钩子函数
• 此阶段是最早可以发送ajax请求的阶段
• 此阶段还取不到最终渲染完成的dom

beforeMount(挂载之前)

• 编译模板已经结束，但尚未渲染到dom上
• 可以访问data中的数据
• 可以修改data中的数据但依旧不会触发updated、beforeUpdate钩子函数

mounted(挂载之后)

• 真实的dom已经渲染到页面，可以操作渲染后的dom
• 也可以访问和修改data中的数据
• 此时修改数据会触发updated、beforeUpdate钩子函数

beforeUpdate

• 挂载的数据被修改之前触发

updated

• 挂载的数据被修改之后触发

beforeDestroy

• 实例卸载之前被调用
• 可以清理一些资源，防止内存泄露

destroyed

• 实例卸载之后被调用
• 后期还会补充

小结：

需要注意的是在beforeUpdate和updated钩子中不能修改data数据，否则就会进入死循环

计算属性缓存VS方法

// vue实例模板
<div id="app">
      	// 计算属性和方法各调用两次
        {{fullname}}-{{fullname}}
        {{getfullname()}}-{{getfullname()}}
    </div>

//vue实例
 var vm=new Vue({
            el:'#app',
            data:{
                username:'ls',
                age:20
            },
            // 计算属性
            computed:{
                fullname(){
                 	console.log('computed'+this.age);
                }
            },
            // 方法
            methods:{
                getfullname(){
                   console.log('methods'+this.age);
                }
            },
            // 
            mounted(){
                setTimeout(()=>{
                    this.age=22;
                },2000)
            }
        })

//结果
computed20
methods20
methods20
//2s后
computed22
methods22
methods22

通过上面的例子可以看出，虽然计算属性和方法都调用了两次，但计算属性每次却只打印一次，原因在于计算属性会有缓存，而且getfullname会绑定this.age，只要age变化他就会执行，所以只会打印一次，而2s后数据发生了改变，与缓存不同，所以又打印了一次次。对于方法而言，只要有调用它就会执行，所以会打印两次

监听属性

我相信还是有人没有搞懂这个监听属性，看看下面的例子你就清楚啦

var vm=new Vue({
            el:'#app',
            data:{
                age:20,
                supermarket:{
                    fruit:{
                        apple:'apple',
                        orange:'orange'
                    },
                    meat:'chicken',
                    wine:'Whisky'
                }
            },
            //监听属性
            watch:{
            	//监听data中age的变化
                age(newval,oldval){
                    console.log(newval,oldval)
                },
                //监听data中supermarket变化
                supermarket:{
                	//发生变化就会执行的回调函数
                    handler(){
                        console.log('supermarket change!!!')
                    },
                    //是否监听对象内部变化
                    // deep:true,
                    //watch首次绑定时是否执行一次回调函数
                    // immediate:false
                }
            },
            mounted(){
                setTimeout(()=>{
                    this.age=22;
                    this.supermarket.meat='pig'
                },2000)
            }

注意：handler是被监测数据发生变化就会执行的回调函数

deep表示是否监测对象内部值得变化
首先让我们看看deep属性对于结果的影响
我们先默认immediate：false，稍后再解释immediate

// deep：false 
22 20

//deep: true
22 20 
supermarket change!!!

普通得watch只能监测data中的数据，当数据发生改变时就可以得到新值和就值并且可以打印出来，而对于对象来说，deep就是监测对象大门的钥匙，当deep为true时，相当于打开了对象得大门，表示可以监测对象内部数据得变化，而监测到数据变化那么handler就是被调用。当deep为false时无法监测到对象内部数据的变化，所以handler不会被调用

我相信如果你读懂上面这段话，那么你就理解了deep的含义了^^

接着让我们先来看看immediate属性对于结果的影响：
默认deep：ture

// immediate：false
22 20
supermarket change!!!

// immediate：true
supermarket change!!!
22 20
supermarket change!!!

immediate为true表示watch首次绑定时执行一次回调函数，
注意看上面的结果，第二行表示数据发生了改变，所以真正因为数据改变而触发的回调是第三行

好了，immediate含义并不难懂，理解了deep你就掌握了如何监听一个对象了~~~

v-if与v-show

话不多说先看代码

<div id="app">
        <button v-if="type">v-if</button>
        <button v-show="type">v-show</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                type:false
            },
        })
    </script>

当type为true时：

<div id="app">
        <button v-if="type">v-if</button>
        <button v-show="type">v-show</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                type:true
            },
        })
    </script>

小结：v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单的多，元素直接被渲染，条件为假时，就进行css样式隐藏