opitions ：五种属性

红色：必学
黄色：进阶属性

紫色：特殊
蓝色：不常用，可学可不学
绿色：红色的对应
灰色：很不常用
数据：data props computed methods watch propsData
DOM：el template render renderError
生命周期钩子：beforeCreate create beforeMount mounted beforeUpdata updated beforeDestory destoryed actived deactivated errorCaptured
资源：directived filters components
组合：mixins extends provide inject parent

入门属性

el - 挂载点与 $mount() 功能相同

new Vue(opitions).$mount('selector')

data - 内部数据

单文件组件只能用 function (避免组件复用时不同组件修改 data 时 data 被覆盖)

new Vue({data(){return {n:0}}})  //优先使用函数
或 new Vue({data:{n:0}})

methods - 事件处理函数或普通函数

components - 组件（实例中的实例）

import Demo from './Demo.vue'
new Vue({
components:{Demo}
  template:
      `<div>
          <Demo/>
      </div>`
})
或 Vue.components('demo',{template:'<div>demo</div>'})

四个钩子

created - 实例出现在内存中时触发
mounted - 实例出现在页面中时触发
updated - 数据更新时触发

destoryed - 实例从页面中消失时触发

props (外部属性) - 将外部变量传到组件内部使用，还可以传方法改变数据并更新组件视图

//Demo.Vue
<template>
  <div>{{data}}<div/>  
<template/>
<srcipt>
export default {
  props:['data','fn']
} 
<script/>
//main.js
new Vue({
data:{n:0}
  components:{Demo}
template:
      `<div>
          <Demo data='你好 props' />     //字符串
          <Demo :data=' n ' />          //加 : 后表示js代码,变量 n
          <Demo :data=' n ' :fn=' add ' />          //传 add 方法，改变数据并重新渲染
      </div>`
  })
  methods:{
    add(){this.n += 1}
}
})

进阶属性

computed - 计算属性

类型：{ [key: string]: Function | { get: Function, set: Function } }

示例

new Vue({
data: {
  user: {
    email: " 123@qq.com",
    nickname: "圆圆",
    phone: "13812312312",
  },
},
computed: {
  displayName: {
    get() {
      const user = this.user;
      return user.nickname || user.email || user.phone;
    },
    set(value) {
      console.log();
      this.user.nickname = value;
    },
  },
},
template: `<div>
            {{displayName}}
          <div>
          {{displayName}}
          <button @click="add">改名</button>`,
methods: {
  add() {
    this.displayName = "芳芳";
  },
},
}).$mount("#app");

缓存：如果依赖的属性没有变化就不会重新计算。

watch - 监听（异步）：适合当数据变化时执行一个函数，或保存某些数据，不需要得到计算结果。（不要用箭头函数）

语法：

//语法1
watch: {
o1: function (value, oldvalue){},
o2(){},
o3: [f1,f2],
o4: 'methodName',
o5: {handler: fn, deep: true, immediate: true,}
object.a": function(){},
}
//语法2
create(){
  this.$watch('xxx', fn, {deep:true,immediate:true})
}
其中xx可以改为一个返回字符串的函数

示例：

new Vue({
data: {
  n: 0,
  history: [],
  inUndoMode: false,
},
watch: {
  n(newValue, oldValue) {
    if (!this.inUndoMode) {
      this.history.push({ from: oldValue, to: newValue });
    }
  },
},
template: `<div>
            <button @click="add">+1</button>
            <button @click="minus">-1</button>
            <hr/><button @click="Undo">撤销</button>
            <hr/>{{history}}
          </div>`,
methods: {
  add() {
    this.n += 1;
  },
  minus() {
    this.n -= 1;
  },
  Undo() {
    const last = this.history.pop();
    const old = last.from;
    this.inUndoMode = true;
    this.n = old;
    this.$nextTick(() => {          //因为 watch 是异步的所以需要使用 $nextTick
      this.inUndoMode = false;
    }, 0);
  },
},
}).$mount("#app");

immediate 属性：第一次是否执行

new Vue({
  data:{
  obj:{a:0,b:1}
},
template:`<div>
            <button @click="obj.a += 1">obj.a + 1</button>        //obj.a 数据变了,不会触发 obj
            <button @click="obj={a:0,b:1}">obj = 新对象</button>  //只触发 obj
          </div>`,
watch:{
      obj(){console.log('obj 数据变了')},
    "obj.a"(){console.log('obj.a 数据变了')},
  "obj.b"(){console.log('obj.b 数据变了')}
  }
})
//使用 immediate
watch:{
obj:{
  handle(){console.log('obj 数据变了'}),
  immediate:true                            //页面第一次加载时就会触发
},
}

deep 属性：监听对象时，是否监听对象内部的变化。默认如果对象地址没变，就不会触发绑定的事件

new Vue({
  data:{
  obj:{a:0,b:1}
},
template:`<div>
            <button @click="obj.a += 1">obj.a + 1</button>        //obj.a 数据变了,不会触发 obj
            <button @click="obj={a:0,b:1}">obj = 新对象</button>  //只触发 obj
          </div>`,
watch:{
      obj(){console.log('obj 数据变了')},
    "obj.a"(){console.log('obj.a 数据变了')},
  "obj.b"(){console.log('obj.b 数据变了')}
  }
})
//使用 deep
watch:{
obj:{
  handle(){console.log('obj 数据变了'}),
    deep:true                                //此时 obj 中的任何值改变都会触发事件
},
}

directives - 自定义指令

作用：减少重复的原生 DOM 操作

全局指令：Vue.directive( 'x',{} )

Vue.directive('focus', {
bind: function(){},                    // 只调用一次，指令第一次绑定到元素时调用,初始化设置
inserted: function(el){ el.focus() },  // 当被绑定的元素插入到 DOM 中时
unbind: function(){}                   // 只调用一次，指令与元素解绑时调用。
})

局部指令：options.directives:{}

new Vue({
el:"#xxx",
data(){},
directives: {
  focus: {
    inserted: function(el) { el.focus() }
  }
}
})

mixins - 混入(复制，并智能合并)

作用：减少 data、methods、钩子的重复。
全局指令：Vue.mixin({}}
局部指令：options.mixins:[ mixins1,mixins2 ]

示例：

//xxx.js
const obj = {
  data(){},
created(){console.log(1)}      //1
}
export default obj
//A.Vue
import Obj from './xxx.js'
<script>
export default {
      created(){console.log(2)},        
      mixins: [Obj]                                 //1 2
  }
</script>

extends - 继承

全局继承： Vue.extend({})

局部继承：options.extends:{}

//MyVue.js
import Obj from './xxx.js'
const MyVue = Vue.extend({
  mixins: [Obj]
})
//A.Vue
import MyVue from './MyVue.js'
<script>
export default {
      created(){console.log(2)},        
  extends: MyVue
  }
</script>

provide、inject - 提供、注入

作用：共用 data、methods，祖先提供，后代注入。

示例：

//父组件
<script>
  export default {
      data(){ return    {name : "圆圆"} },
  methods:{
      rename(){
        this.name = this.name === '圆圆' ? 芳芳 : 圆圆
    }
  },
      provide(){
      return {
        name: this.name,
        rename: this.rename
    }
  }
  }
</script>
//子组件
<template>
  <div><button @click="rename"/></div>  
</template>
<script>
  export default {
      reject:['name','rename']
  }
</script>

前端专栏

vue 实例的构造选项

opitions ：五种属性

入门属性

el - 挂载点与 $mount() 功能相同

data - 内部数据

methods - 事件处理函数或普通函数

components - 组件（实例中的实例）

四个钩子

props (外部属性) - 将外部变量传到组件内部使用，还可以传方法改变数据并更新组件视图

进阶属性

computed - 计算属性

watch - 监听（异步）：适合当数据变化时执行一个函数，或保存某些数据，不需要得到计算结果。（不要用箭头函数）

directives - 自定义指令

mixins - 混入(复制，并智能合并)

extends - 继承

provide、inject - 提供、注入

vue 实例的构造选项

opitions ：五种属性

入门属性

el - 挂载点 与 $mount() 功能相同

data - 内部数据

methods - 事件处理函数或普通函数

components - 组件 （实例中的实例）

四个钩子

props (外部属性) - 将外部变量传到组件内部使用，还可以传方法改变数据并更新组件视图

进阶属性

computed - 计算属性

watch - 监听（异步）：适合当数据变化时执行一个函数，或保存某些数据，不需要得到计算结果。（不要用箭头函数）

directives - 自定义指令

mixins - 混入(复制，并智能合并)

extends - 继承

provide、inject - 提供、注入

el - 挂载点与 $mount() 功能相同

components - 组件（实例中的实例）