vue.js学习笔记

学习了慕课网课程Vue.js高仿饿了么外卖App之后的整理。

  • method和计算属性的区别
    我们可以通过调用表达式中的method来达到和计算属性同样的效果。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
    相比而言,每当重新渲染的时候,method调用总会执行函数。

  • watch
    Vue 提供一个更通用的方法通过watch选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作昂贵操作时,这是很有用的。使用watch选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的。

  • v-if vs. v-show
    v-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
    v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
    相比之下,v-show简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
    一般来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此,如果需要频繁切换使用v-show较好,如果在运行时条件不大可能改变则使用v-if较好。

  • methods只有纯粹的数据逻辑,而不是去处理DOM事件细节

  • 事件修饰符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
  • 使用 v-on 有几个好处:
    – 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    – 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
    – 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

  • 组件
    组件作用域简单地说是:
    父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

0%