计算属性的特点

  1. 计算属性使数据处理结构清晰
  2. 依赖于数据，若数据更新，则处理结果自动更新
  3. 计算属性内部 this 指向 vm 实例
  4. 模板调用时，直接写计算属性名即可
  5. 常用的是 getter 方法，用于获取数据，也可以使用 setter 方法改变数据
  6. 相较于methods，不管依赖的数据是否改变，methods都会重新计算，但是依赖数据不变的时候，computed从缓存中获取，不会重新计算。
  1. <div id="app">
  2.     <input v-model="firstName"/>
  3.     <input v-model="lastName"/>
  4.     <input v-model="fullName"/>
  5. </div>
  7. var vm = new Vue({
  8.            el: '#app',
  9.            data: {
  10.               firstName: 'Foo',
  11.                lastName: 'Bar'
  12.           },
  13.           computed: {
  14.                fullName: {
  15.                    // getter
  16.                    get: function () {
  17.                        return this.firstName + ' ' + this.lastName
  18.                    },
  19.                    // setter
  20.                    set: function (newValue) {
  21.                        var names = newValue.split(' ')
  22.                        this.firstName = names[0]
  23.                        this.lastName = names[names.length - 1]
  24.                    }
  25.                }
  26.            }
  27.       })

各生命周期适合开发的业务逻辑

  • created：进行 Ajax 请求异步数据的获取、初始化数据
  • mounted：挂载元素内 DOM 节点的获取
  • nextTick：针对单一事件更新数据后立即操作 DOM
  • updated：数据更新的统一业务逻辑处理
  • watch：监听具体数据变化，并做相应的处理

v-if 与 v-slow

  1. <div id="app-2">
  2.     <span v-show="computedSeen">
  3.       v-show：用 css (display: none)来显示 or 隐藏。这不修改 DOM。
  4.     </span> No Show.
  5.     <hr>
  6.       <!-- v-if: 控制显示与否 -->
  7.     <span v-if="seen">
  8.       鼠标悬停几秒钟查看此处动态绑定的提示信息！这会修改 DOM。
  9.     </span>
  10.     <h1 v-else>No Seen</h1>
  11.     <!--‘
  12.         v-else’元素必须要紧挨着
  13.         v-if 元素，否则它将无法被识别。
  14.     -->
  15.       <template v-if="seen">
  16.            <!--由于 v-if 是一个指令，它必须添加在单个元素上。但是如果我们想切换多个元素的话要怎么做呢？可以通过让
  17.                 <template> 元素充当一个不可见的包装元素，并在
  18.                 <template>元素上使用
  19.                 v-if 来实现，最终的渲染结果不会包含
  20.                 <template> 元素。
  21.             -->
  22.            <h1>多标记 if</h1>
  23.            <p>段落1</p>
  24.            <p>段落2</p>
  25.       </template>
  26.  </div>
  1. v-if 是动态地向 DOM 树内添加或删除 DOM 元素，v-show 是通过设置 DOM 元素的 display 样式属性控制显隐
  2. v-if 是真实的条件渲染，因为它会确保条件块在切换中适当地销毁与重建条件块内的事件监听器和子组件。v-show 只是简单地基于 css 切换
  3. v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译（编译会被缓存起来）。v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留。
  4. 相比之下，v-show 简单得多，元素始终被编译并保留，只是简单地基于 CSS 切换。
  5. 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时条件不大可能改变，则使用 v-if 较好。

组件中的 data 必须是函数

因为一个组件可以多处复用，如果是对象，那么复用的组件实例都显示相同的内容，失去了组件复用的意义。只有一个例外，构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。

slot 作用域插槽

一种子向父传参的方式，解决普通 slot 在 parent 中无法访问 子组件数据的问题

  • 代表性用例：列表组件

允许在 parent 父组件上对列表项进行自定义显示，该 items 的所有列表项都可以通过 slot 定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式

  1. <my-component :items="myItems">
  2.     <!--作用域插槽也可以是具名的-->
  3.     <template slot="item" scope="props">
  4.         <!-- 允许父组件向子组件分发内容-->
  5.         <li class="my-fancy-item">{{props.username}} {{ props.text }}</li>
  6.     </template>
  7. </my-component>
  1. Vue.component('my-component', {
  2.           props:["items"],
  3.           template: `
  4.                  <ul>
  5.                     <hr>
  6.                      <slot name="item" v-for="item in items" :username="item.username" :text="item.text"></slot>
  7.                     <hr>
  8.                 </ul>`,
  9.           created: function(){
  10.               console.log(this.items) ;
  11.           }
  12.       })
  13.  //  初始化根实例
  14.       var app7 = new Vue({
  15.           el: '#app-7',
  16.           data: {
  17.               myItems:[
  18.                 {username:'小慧', text: '毕业了'},
  19.                 {username:'小兰', text: '毕业了'},
  20.                 {username:'小强', text: '毕业了'}
  21.             ]
  22.           }
  23.       })