Vue学习3

学习该章节重点知识

• 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
• 值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
  //简单来说:Vue实例的data属性的对象里所有内容,在初始化的时候就必须写进去,这些数据才是响应式的,初始化过后的vue实例属性,是不响应的,那么问题来了,如果我确定会在初始化之后要用到某些数据咋办呢? 在data里面先声明,值为null,日后用到再赋值给这个值为null的属性
  //再简单来说,Vue这个框架有一个响应系统(也就是一堆代码),Vue实例的所有属性都会响应,因为初始化的时候是告诉了响应系统的,如果没在初始化的时候放进Vue实例属性里面,那么要先声明一个空对象值为null在data里面占个位置
  //最简单来说,一个应用要用的数据和函数对象,都要放在Vue实例的初始化代码里,这里面的东西才是响应式的,不然vm.b=1 这些不是写在vue实例的代码不响应
  //有修改,那么就有阻止修改Object.freeze()就是阻止修改现有属性的
• 使用vue的时候不要在选项属性或回调上使用箭头函数

生命周期钩子函数，给了用户在不同阶段添加自己的代码的机会。

• 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
• 在vue里面不要在选项属性或回调上使用箭头函数
  //因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

模板语法

• vue的模板指的是组件模板,也就是在Vue.component里面注册的模板,因为这些组件模板的使用是要在html页面上使用的,所以模板语法指的就是这些在html上使用的组件的语法
• 官网把它区分三部分:
• 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
  //这句话体现了vue特色,响应式,组件化,原始写html都是直接给字符串,而组件模板是用数据,数据在组件身上,或者在父组件身上,总之就是模块化,展示+数据的分离,控制器来控制
  //简单来说vue组件是数据绑定,不是直接给字符串,当然也可以直接在html标签上使用字符串,和一些数据,这vue不硬性规定
• 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

计算属性

• 组件模板除了简单的插值文本,还可以使用表达式做一些简单运算,如果放过多的逻辑就不符合初衷了,所以vue专门提供了一个计算属性

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

• 这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
  //我个人理解:计算属性应该是vue实例的一个属性,里面放属性方法,具体的函数被称为getter函数
• vm.reversedMessage 的值始终取决于 vm.message 的值。
• 而且用计算属性比表达式更好的一点是:保持了vue一贯的声明式使用
• 除了使用计算属性 也可以直接当做一个函数调用放在,method里面,区别在于:
  计算属性是依赖,data数据里的message值,vue在实现这个功能的时候是进行了缓存处理的,也就是说,massage不变,每次使用计算属性 都是直接给上次缓存的值,就不用再次运算,而放在method里面的函数 每次调用都会重新计算,因为没有缓存.这有什么问题呢?
  //假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
• 计算属性不是简单地运算用的,而是存放复杂逻辑的
• 侦听属性
  //Vue 提供了观察和响应 Vue 实例上的数据变动的属性
  //这里要比较一下计算属性和监听属性的优劣:虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时
  //简单来说,异步的运算就交给侦听属性把
• 侦听器
  //Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

Class style绑定

• 我们可以传给 v-bind:class 一个对象，以动态地切换 class
  //当然v-bind:class 指令也可以与普通的 class 属性共存
• 除此之外,如果想插入多个class可以打包封装
  
  
  data: {
  classObject: {
  active: true,
  'text-danger': false
  }
  }

条件渲染

• 不同于v-if v-else v-if-else;v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
• 注意，v-show 不支持