笔记vue：小记

1.vue生命周期过程

beforeCreate:实例化vue-> new Vue()
created:已经可以取到实例中data和methods中的数据了
beforeMount:在内存中生成模板
mounted:将模板挂载到<div id="app"></div>上
beforeUpdate：data已经被改变，但未跟页面同步，即页面还未重新渲染
update：data与页面渲染的同步了
beforeDestroy:实例还未销毁，中的各个还可用
destroyed:实例已经不可用了

2.vue路由query和params区别

1).query:url路径中 ？后面的参数

<router-link to="/bar？id=1">Go to Bar</router-link>
const User = {
  template: '<div>User {
   
   { $route.query.id }}</div>'
}

2).params:路由中path项中的动态参数

{ path: '/user/:id', component: User }
const User = {
  template: '<div>User {
   
   { $route.params.id }}</div>'
}

注意和此方法区分（特定写法）this.$router.push()/go().

3.watch和computed属性和methods方法

watch-监听属性:

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>

局部写法：

watch : {
    
    
           kilometers:function(val) {
    
    
              this.kilometers = val;
              this.meters = this.kilometers * 1000
           },
           meters : function (val) {
    
    
              this.kilometers = val/ 1000;
              this.meters = val;
           }
         }

还可以监听路由的变化:

watch : {
    
    
        “route.path”：function(newValue, oldValue){
    
    
          //....
         }  
        }

全局写法：

vm.$watch('kilometers', function (newValue, oldValue) {
    
    
   //...			
})

watch监听的时候需要全部监听。

---

computed计算属性: 会被缓存

<div id = "computed_props">
    <input type = "text" v-model = "firstname">+
    <input type = "text" v-model = "lastname">=
    <input type = "text" v-model = "fullname">
</div>

computed: {
    
    

    fullname：function () {
    
    
       //计算属性需要return，watch不需要（偏逻辑）
       return this.firstname+this.lastname;
    }
}