Vue中一些重要的知識點

本文主要和大家分享Vue中一些重要的知識點，希望能幫助大家。

不要在選項屬性或回呼上使用箭頭函數

例如

• #created: () => console.log(this.a)

• vm.$watch('a', newValue => this.myMethod())
  因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的Vue 實例，經常導致Uncaught TypeError: Cannot read property of undefined 或Uncaught TypeError: this.myMethod is not a function 之類的錯誤

#具體見:這裡

#v-html

雙大括號會將資料解釋為普通文本，而非HTML 程式碼。為了輸出真正的HTML，你需要使用v-html 指令：

<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span></span></p>

具體見:這裡

##計算屬性快取vs 方法

我們可以將相同函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是

計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有改變，多次存取 reversedMessage 計算屬性會立即傳回先前的計算結果，而不必再執行函數。 這個 計算屬性是基於它們的依賴進行快取的 是什麼意思呢？

computed: {  now: function () {    return Date.now()
  }
}

這裡雖然

Date.now()的值一直在變，但是他沒有被watch，因為他不是響應式依賴。

具體見:這裡

CSS樣式自動加入前綴

當

v-bind:style 使用需要新增瀏覽器引擎前綴的CSS 屬性時，如transform，Vue.js 會自動偵測並加入對應的前綴。

具體見: 這裡

在

因為v-if 是指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個  元素當作不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含

<template>  <h1 id="Title">Title</h1>  <p>Paragraph 1</p>  <p>Paragraph 2</p></template>

具體見:這裡

v-if 和v-show 和v-for

• v-if 是頁面元素的新增和移除動作

• #v-show 是頁面元素的顯示與隱藏操作

• 當v-if 與v-for 一起使用時，v-for 具有比v-if 更高的優先權。

具體見:這裡

數組更改檢測注意事項

Vue 不能檢測一下方式變動的數組，從而將不會觸發視圖更新

• 當你利用索引直接設定一個項目時，例如：

  vm.items[indexOfItem] = newValue

• 當當你修改數組的長度時，例如：

  vm.items.length = newLength

#2

物件更改偵測注意事項

Vue 無法偵測物件屬性的新增或刪除

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

但是我們可以透過

Vue.set(object, key, value)方法來向嵌套對象添加響應式屬性。 另外還有這個常用的方法
Object.assign()，當我們想要為某個物件賦予多個新屬性 的時候，你應該要這樣玩

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

具體見: 這裡

在

v-for 中使用methods 方法

{{ n }}

具體見: 這裡

元件使用

v-for

在自訂元件裡，你可以像任何普通元素一樣用

v- for。

<my-component></my-component>

具體見: 這裡

.once 事件修飾符(2.1.4 新增)

<!-- 点击事件将只会触发一次 --><a></a>

.once 也可以使用在自訂元件 上。

具體見:這裡

is 特性

由於dom某些元素本身的一些限制，

、

、、 這樣的元素裡允許包含的元素有限制。

<div>  <table>    <money></money>  </table>
</div>Vue.component('txt',{
   template: '<div>I like money!</div>'})new Vue({
  el:'#app'})

將會解析成下面的dom

<div>
  <div>I like money!</div>
  <table></table>
</div>

如果想要解析正確，需要使用

is 這個屬性。

<div>
  <table>
    <tr></tr>
  </table>
</div>

這樣dom就解析正確了。

<div>
  <table>
     <tbody>
        <div>I like money!</div>
     </tbody>
  </table>
</div>

具体见:这里

将对象的所有属性作为 prop 进行传递

如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

todo: {
  text: 'Learn Vue',
  isComplete: false}

然后:

<todo-item></todo-item>

将等价于：

<todo-item></todo-item>

具体见： 这里

非 Prop 特性的替换与合并

• class 和 style这两个特性的值都会做合并 (merge) 操作

• 其他属性(如: type) 则会进行覆盖

具体见: 这里

Props的一般绑定和动态绑定

我们常用的一般是动态绑定:

// 父组件<child></child>new Vue({  data () {    return {
       parentMsg: '来自父组件的数据'
    }
  }
})// 子组件Vue.component('child', {  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'})

显示:

<span>来自父组件的数据</span>

一般绑定:

// 父组件<!-- 在 HTML 中使用 kebab-case --><child></child>

子组件获得的是: 字符串 'hello!'

具体见:这里

.sync 修饰符(2.3.0+新增)

之前在 2.0 版本中移除后，在 2.3.0 中又加上了，只是调用的逻辑发生了变化，变成了一种语法糖。
如下代码:

<comp></comp>

会被扩展为：

<comp> bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

有点类似与 v-model

具体见:这里

自定义组件的 v-model(2.2.0 新增)

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。这也是之前 v-model 默认绑定的元素 和 事件方法。

但是到 2.2.0 时候，我们可以通过 model 配置这个两个属性。

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',    event: 'change'
  },
  props: {
    checked: Boolean,    // 这样就允许拿 `value` 这个 prop 做其它事了
    value: String
  },  // ...})

<my-checkbox></my-checkbox>

上述代码等价于：

<my-checkbox> { foo = val }"
  value="some value"></my-checkbox>

具体见:这里

插槽内容分发

我们不总能遇见我们的组件中包含了哪些元素，这时候我们在开发组件的时候，需要让这部分内容自定义。
假定 my-component 组件有如下模板：

<div>
  <h2 id="我是子组件的标题">我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

父组件模板：

<div>
  <h1 id="我是父组件的标题">我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

渲染结果：

<div>
  <h1 id="我是父组件的标题">我是父组件的标题</h1>
  <div>
    <h2 id="我是子组件的标题">我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

当然还有 具名插槽 、作用域插槽(2.1.0 新增)、slot-scope(2.5.0新增)

具体见:这里

动态组件

通过使用保留的 <component></component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component>  <!-- 组件在 vm.currentview 变化时改变！ --></component>

注意这里的 is 与 之前说的 v-bind:is 别混淆

具体见:这里

对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: '\    <div>\      <h1 id="Terms-of-Service">Terms of Service</h1>\      ...很多静态内容...\    </div>\  '})

具体见:这里

混合(mixins)的合并策略

周期钩子的合并策略

• 同名钩子函数将混合为一个数组，因此都将被调用

• 混合对象的钩子将在组件自身钩子 之前 调用

var mixin = {  created: function () {    console.log('混合对象的钩子被调用')
  }
}new Vue({
  mixins: [mixin],  created: function () {    console.log('组件钩子被调用')
  }
})// => "混合对象的钩子被调用"// => "组件钩子被调用"

methods, components 和 directives 的合并策略

• 两个对象键名冲突时，取组件对象的键值对

var mixin = {
  methods: {    foo: function () {      console.log('foo')
    },    conflicting: function () {      console.log('from mixin')
    }
  }
}var vm = new Vue({
  mixins: [mixin],
  methods: {    bar: function () {      console.log('bar')
    },    conflicting: function () {      console.log('from self')
    }
  }
})vm.foo() // => "foo"vm.bar() // => "bar"vm.conflicting() // => "from self"

以上是Vue中一些重要的知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！