Vue全攻略：从基础到高级性能优化-优快云博客

//监听基本类型

export default{
data(){
return{
name:'ztt',
info:{
hobby:'zyf',
}

}
watch: {
name(newValue,oldValue){
console.log('name',newValue,oldValue)
}
info:{
handler:function(newValue,oldValue){

console.log('info',newVaule,oldVaule)
}
//深度监听
deep:true;

}
}
}

四.绑定class和style

动态绑定类名：class="{'active':isActive}" 或：class="['active']" isActive

style ：style="styleData" styleData:{backgroundColor:"red",color:"white"};

五.v-if和v-show的区别

v-show会把不显示的内容也会显示出来。

如果状态不断变化，使用v-show

六.v-for列表循环

遍历数组：v-for="(item,index) in array” :key="item.id"

遍历数组：v-for="(value,key,index) in object" :key="key"

***v-if和v-for不能一起使用，v-for优先级比v-if高；

七.父子组件通信

父组件向子组件传值：props

子组件向父组件传值：$emit

八.组件基本的生命周期

九.父子组件的生命周期

created，before update先父后子,

update，destory，mounted是先子后父；

十.slot插槽

十一.动态组件

<component :is="item.type"></component>

<template>
    <div id="app">
        <div v-for="item in productData" :key="item.id">
        <component :is="item.type"></component>
        </div>
    </div>
</template>
<script>
    import Video from './components/Video';
    import Text from './components/Text';
    export default {
        name: "App",
        data(){
            return{
                productData:[
                    {
                        id:1,
                        type:'Video'
                    },
                    {
                        id:2,
                        type:'Text'
                    }
                ]
            }
        },
        component:{
            Video,
            Text
        }
    }
</script>

<style scoped>

</style>

十二.异步组件

页面首次渲染的时候，不去加载某部分代码，需要的时候再去加载，提升了性能；

compents:{

Test:()=>import('./compents/Test')

//组件加载的时候起名字

Test:()=>import(/*webpackChunkName:"Test"*/,'./compents/Test')

}

十三.keep-alive实现组件的缓存

在组件外面套一层<keep-alive></keep-alive>,组件不会被销毁，会被缓存起来

如果组件比较简单，可以使用v-show,如果比较复杂，使用keep-alive;

十四.v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

1.v-for优先于v-if被解析；

2.如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能；

3.要避免出现这种情况，则在外层嵌套template,在这一层进行v-if判断，然后在内部进行v-for循环；

十五、vue组件data为什么必须是一个函数，而vue的根实例则没有此限制？

vue组件可能存在多个实例，如果使用对象形式定义data,则会导致他们公用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的。采用函数形式定义，在initData时将其作为工厂函数返回全新data对象，有效规避多实例之前状态污染问题。而在vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。