Vue学习笔记（2）

我是一条酸菜鱼。

Vue实例

创建Vue实例

• 待补充

数据与方法

Vue实例 - Vue的响应式系统：

• data对象中的属性值改变会带来视图的响应
• 只有实例创建时data中已存在的属性才是响应式的
• Vue实例自带的实例属性与方法带有前缀$，与用户自定义的属性区分

• 阻止修改现有的属性 - Object.freeze()(下例）

  //js    
  var obj = {
    foo: 'bar'
  }
  
  Object.freeze(obj)
  
  new Vue({
    el: '#app',
    data: obj
  })
  --------------------------------------------
  //html
  <div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button v-on:click="foo = 'baz'">Change it</button>
  </div>
  

实例生命周期钩子

Vue的初始化过程：

生命周期钩子（在vue初始化过程某些阶段运行钩子对应的函数），函数中调用的 this 指向调用它的vue实例。

• created
• mounted
• updated
• destroyed

不要在选项属性或回调上使用箭头函数，比如 created: () =console.log(this.a) 或 vm.$watch(‘a’, newValue =this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到位置，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

（假装此处有图）

---

计算属性和侦听器

计算属性

• 尽可能使得模板内的表达式是简单的声明式逻辑
• 使用计算属性来表达复杂逻辑
• 计算属性放在Vue的 computed 分类中，后接一个getter函数用于得到/更新属性的值
• 计算属性的使用方法与普通属性一致，可以在模板中绑定
• 计算属性基于它们的响应式依赖进行缓存。大概就是计算属性是一个属性（变量），同时由一个函数f得到它的值。当f中使用到的变量（可能是data中的）发生改变时，计算属性就会响应式地更新。类似的，跳过计算属性，在模板绑定一个方法也可以得到同样的效果。区别在于:
  • 计算属性依赖于f中的变量，会缓存当前结果，如果f中的变量没有更新，多次访问计算属性会返回缓存的结果，而不需要重新执行计算函数
  • 函数每次调用都会重新计算，无缓存
  • 大概是性能开销和空间开销之间的选择

计算属性实例：

使用计算属性/使用方法可以达到同样的效果，区别在于有无缓存

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <p>Computed reversed message: "{{ reversedMessage1() }}"</p>    
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      // message不更新，则reversedMessage这个计算属性返回的会是缓存的值
      return this.message.split('').reverse().join('')
    }
  }，
  methods: {
  reversedMessage1: function () {
    return this.message.split('').reverse().join('')
  }
}
})

计算属性另一种实例

在计算属性中加入setter，此时可以使用赋值

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听属性

• 用于观察和响应Vue实例上的数据变动，watch分类中的数据都随着其他数据变动而变动。（容易滥用?)
• 更通用的方法来响应数据的变化。
• 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

使用方法与计算属性类似，在watch:{}中添加

VUE文档中给出的DEMO有一个有意思的API：yesOrNo

代码在这里（拉到最后）

---

组件基础

• 组件是可复用的Vue实例，且带有变量名
• 每使用一次组件，就创建一个新的实例
• 组件中的data需要是一个函数，因此复用时，每个实例维护一个独立的拷贝

组件的注册：

• 局部注册

  var ComponentA = { /* ... */ }
  

• 局部注册的组件在其子组件中不可用，需要引入

  var ComponentA = { /* ... */ }
  
  var ComponentB = {
    components: {
      'component-a': ComponentA
    },
    // ...
  }
  

• 全局注册：可以用在其被注册之后的任何（通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

  //一个全局注册的demo 
  //定义一个名为 button-counter 的新组件
  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })
  

• 在模块系统中局部注册

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

• 基础组件的自动化全局注册

使用webpack - 使用require.context全局注册通用的基础组件

Here

• 动态组件切换时会创建新的实例，因此之前第一次创建时没有被缓存。解决问题的方法是使用元素

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

---

插一段软件测试的笔记

（以表达我对蔡老师课堂的热爱

软件缺陷记录的5C原则：

• Correct（准确）：每个组成部分的描述准确，不会引起误解；
• Clear（清晰）：每个组成部分的描述清晰，易于理解；
• Concise（简洁）：只包含必不可少的信息，不包括任何多余的内容；
• Complete（完整）：包含复现该缺陷的完整步骤和其他本质信息；
• Consistent（一致）：按照一致的格式书写全部缺陷报告。