vue基础知识总结

什么是生命周期：

生命周期就是在vue实例在某一个时间点会自动执行的函数

breforeCreat://创建实例之间，在数据观测和初始化还未开始
created:实例创建完成后执行，此时属性已绑定，但是还未挂载到DOM，所以不能访问$el，可以用于初始化一些数据，但是和DOM操作有关的不能放在这里。
beforeMount:载入前，此时页面还未渲染，才是实例已经完成下面配置：编译模板，把data里面的数据和模板生成html，不过此时还未挂载html到页面上

mounted:此时挂载已完成，可以对DOM进行操做

beforeDestroy:组件销毁前
destroyed：组件销毁后
beforUpdate：组件更新前
updated：组件更新后

vue知识点总结

修改数组和对象方法：

1.修改数组，不能直接修改数组下标

• 变异方法：push pop shift unshift splice reverse sort
• 改变引用
• Vue.set() / app.$set()
  2.修改对象
• 改变引用
• Vue.set() / app.$set()

计算属性、监听、方法

1.computed:计算属性是有缓存机制的，如果涉及到的值没有改变，不会重新计算，页面不会重新渲染，可以监听多个变量。
2.watch:监听也是有缓存机制的，每次只能监听单个属性的变化，代码过于麻烦，如果三种都可以实现，建议使用计算属性
3.methods:没有缓存机制，每次都要重新渲染页面

4.//监听复杂数据类型 object array 深度监视

 watch:{
            msg:function(newVal,oldVal){
                console.log(newVal,oldVal)
            },
            //监听复杂数据类型 object array 深度监视
            stus:{
                deep:true,//深度监听
                handler:function(newV,oldV){
                    console.log(newV[0].name)
                }
            }
        }

5.如果涉及到vue实例外的数据发生变化，computed正常是不会重新渲染页面，但是如果watch监听里的变量如果改变，会导致computed重新计算渲染，单独修改arr值是不会发生变化，当watch监听到的值发生变化是，computed会重新计算。

组件

1.全局组件

Vue.component(“组件名”，{
    props:[],
    template:"模板"
})

2.局部组件

var 组件名 = {
    props:[],
    template:"模板"
}

要在vue实例上挂载

components:{
     组件名:组件名
}

3.动态组件
如果组件动态切换，可以用标签 ，is里面的属性名会查找对应的组件来切换。

组件传值

1.父传子：通过属性的形式传递，props，如果是动态的要在子组件上面绑定属性v-bind，如果子组件想要修改父组件的值，必须要在子组件里克隆一份，然后再更改

2.子传父：用emit()传过来的方法名，父组件用另一个方法名去接收方法和参数。

3.组件绑定原生事件，直接在子组件原生事件后面加.native即可

4.非父子组件传值

先设置一个Bus总线 Vue.prototype.bus = new Vue();
用this.bus.on()来监听事件

插槽(slot)

1.如果组件中有一段父组件传递的代码段，可以用插槽解决
2.插槽可以有默认值,如果父组件没有传递，且需要占位，可以给default content
3.具名插槽：如果有多个代码段，用具名插槽，代码里用slot="名字"，而slot里面用name=""来查找
4.作用域插槽：父组件调用子组件的时候，给子组件传了一个插槽，这个就是作用域插槽，必须是一个template开头结尾的内容，要声明从子组件接收的数组放在哪里，然后告诉一个模板的信息，要以什么样结构去展示

子组件里面：

template:`

            
  
              
            
  
        
`

什么使用：当子组件做循环的时候，或者某一部分的Dom结构需要父组件去决定，这样子组件可以向父组件传数据，父组件传递的插槽要接收数据需要用slot-scope接收。

v-for

要记得用key，值最好用唯一的值id

ref

1.用法 this.refs.名称.

2.正常情况下this.$refs.ref获取的是dom节点

3.在子组件上用this.$refs.ref，代表该组件

o-once

可以给页面上的静态代码做缓存，加上它之后，就不会重新被渲染，提高性能。

vuex

大量数据传递