Vue的世界

2018-03-18

Vue实例上的属性

组件树

$parent：用来访问组件实例的父实例
$root: 用来访问当前组件树的根实例
$children:用来访问当前组件实例的直接子组件实例
$refs:用来访问ref指令的子组件

Dom访问

$el：用来挂载当前组件实例的dom元素
$els：用来访问$el元素中使用了v-el指令的DOM元素

数据访问

$data：用来访问组件实例观察的数据对象
$options：用来访问组件实例化时的初始化选项对象

DOM方法的使用

$appendTo(elementOrSelector, callback)：将el所指的DOM元素插入目标元素
$before(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之前
$after(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之后
$remove(callback)：将el所指的DOM元素或片段从DOM中删除
$nextTick(callback)：用来在下一次DOM更新循环后执行指定的回调函数

event方法的使用

1.监听
$on(event, callback)：监听实例的自定义事件
$once(event, callback)：同上，但只能触发一次
$watch(property,callback(new, old)): 监听属性的变化，拿到变化前后的值

         // 第一种写法
watch: {
  text(new, old) {
    console.log(`${new}：${old}`);
  }
}
// 第二种写法
const unWatch = this.$watch('text',(new,old)=>
  console.log(`${new}：${old}`);
})
// 2秒后销毁 unWatch
setTimeout(()=> {
  unWatch();
},2000)
// 两种写法的结果一样，只是第二种需要在组件销毁手动销毁$watch

2.触发
$dispatch(event,args)：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
$broadcast(event,args)：广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
$emit(event, args)：触发事件
3.删除
$off(event, callback)：删除时间监听
4.其他
$forceUpdate()：强制组件刷新
$set(ele,attr,value)：给对象设置属性
$delete(ele,attr,value)：删除对象属性

<template>
  <div id="app">
      <p>{{obj.a}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{}
    };
  }
  mounted(){
    let i = 0;
    setInterval(()=> {
      i++;
      // 第一种
      this.obj.a = i ;
      // obj.a没有定义，vue是无法监听到这个属性的变化，所以页面的值也不会变化，这时可以用$forceUpdate进行强制渲染，当然不推荐这种用法
      this.$forceUpdate();
      
      // 第二种
      this.$set(this.obj,'a',i);
    },1000)
  }
}
</script>

v-model 的修饰符

来自官网的例子：
1..number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
1
<input v-model.number="age" type="number">

这通常很有用，因为即使在 type=”number” 时，HTML 输入元素的值也总会返回字符串。

2..trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
1
<input v-model.trim="msg">
3..lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步(当输入框失去焦点)：

1 2	<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >

数组和对象要特别注意的

1. 数组
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

1 2	// Vue.set Vue.set(vm.items, indexOfItem, newValue)

1 2	// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

1	vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

1	vm.items.splice(newLength)

2. 对象
Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

1	Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

1	vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

computed 计算属性

计算属性的使用

<template>
  <div id="app">
    <p>{{name}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: 'Fin',
      lastName: 'Get',
    };
  },
  computed: {
    name() {
      return `${this.firstName}${this.lastName}`
    }
  }
}
</script>

双向绑定的计算属性与Vuex

// vuex state是无法直接修改的，官方给出了 v-model 的解决方案
<input v-model="message">
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

如果在方法或者生命周期中使用了计算属性，则必须设置一个set

watch 监听器

watch 简单使用

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: { // watch 方法最初绑定的时候，它是不会执行的，只有变化了才会执行
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
watch: { 
// 声明一个handler，这样在初始化时就会执行一次 handler
  firstName: {
    handler(val) {
      this.fullName = val + ' ' + this.lastName
    },
    immediate: true
  }
}

监听对象属性的变化

<div id="demo">{{ obj.a }}</div>
<input v-model="obj.a" />
var vm = new Vue({
  el: '#demo',
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler() {
        console.log('obj.a changed');
      },
      immediate: true,
      deep: true // 如果不加这一句，在输入框中输入值，并不会打印 obj.a changed
    }
  }
})
// 这样写就能监听到属性值的变化
watch: {
  'obj.a': {
    handler() {
      console.log('obj.a changed');
    }
  }
}