Vue の重要な知識ポイント

この記事では主に Vue の重要な知識ポイントをいくつか紹介し、皆様のお役に立てれば幸いです。

オプションのプロパティやコールバックではアロー関数を使用しないでください

たとえば、

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

• vm.$watch('a', newValue => ; this.myMethod())
  アロー関数は親コンテキストにバインドされているため、this は期待どおりの Vue インスタンスにはなりません。 Uncaught TypeError: Cannot read property of unknown または Uncaught TypeError: this.myMethod is not a functionthis 不会是如你所预期的 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 v-html="rawHtml"></span></p>

具体见:这里

计算属性缓存 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这个 计算属性是基于它们的依赖进行缓存的 是什么意思呢？

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

这里虽然Date.now()的值一直在变，但是他没有被watch，因为他不是响应式依赖。

具体见:这里

CSS样式自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

具体见: 这里

在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个  元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">  <h1>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

具体见:这里

对象更改检测注意事项

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 方法

<li v-for="n in even(numbers)">{{ n }}</li>

具体见: 这里

组件使用 v-for

在自定义组件里，你可以像任何普通元素一样用 v-for。

<my-component v-for="item in items" :key="item.id"></my-component>

具体见: 这里

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

<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>

.once 也可以使用在 自定义组件 上。

具体见:这里

is 特性

由于dom某些元素本身的一些限制，<ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制。

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

将会解析成下面的dom

<div id="app">
  <div>I like money!</div>
  <table></table>
</div>

如果想要解析正确，需要使用 is

v-html

二重中括弧は、データを HTML コードではなく通常のテキストとして解釈します。実際の HTML を出力するには、v-html ディレクティブを使用する必要があります:

<div id="app">
  <table>
    <tr is="money"></tr>
  </table>
</div>

<div id="app">
  <table>
     <tbody>
        <div>I like money!</div>
     </tbody>
  </table>
</div>

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

<todo-item v-bind="todo"></todo-item>🎜 🎜しかし、<code>Vue.set(object, key, value)</code> メソッドを通じて、ネストされたオブジェクトに応答性の高いプロパティを追加できます。 🎜一般的に使用されるメソッド <code>Object.assign()</code> もあります。オブジェクトに 🎜複数の新しい属性🎜を割り当てたい場合は、次のように行う必要があります🎜<div class="highlight highlight- source-js">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"></todo-item>

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

// 父组件<!-- 在 HTML 中使用 kebab-case --><child my-message="hello!"></child>

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

<comp :foo.sync="bar"></comp>

<comp :foo="bar" @update:foo="val => bar = val"></comp>

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

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

<todo-item v-bind="todo"></todo-item>

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"></todo-item>

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

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

// 父组件<!-- 在 HTML 中使用 kebab-case --><child my-message="hello!"></child>

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

<comp :foo.sync="bar"></comp>

<comp :foo="bar" @update:foo="val => bar = val"></comp>

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

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

<my-checkbox v-model="foo" value="some value"></my-checkbox>

<my-checkbox  :checked="foo"
  @change="val => { foo = val }"
  value="some value"></my-checkbox>

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

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

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

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

<component v-bind:is="currentView">  <!-- 组件在 vm.currentview 变化时改变！ --></component>

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

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

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"