Vue의 몇 가지 중요한 지식 포인트-JS 튜토리얼-php.cn

이 기사는 Vue의 몇 가지 중요한 지식 포인트를 주로 공유하여 도움이 되기를 바랍니다.

옵션 속성이나 콜백에 화살표 기능을 사용하지 마세요.

예를 들어

created: () => console.log(this.a)
vm.$watch('a', newValue => ; this.myMethod())
화살표 함수가 부모 컨텍스트에 바인딩되어 있기 때문에 this는 예상한 대로 Vue 인스턴스가 아닙니다. Uncaught TypeError: Cannot read property of ununde 또는 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>

로그인 후 복사

참조: here🎜

계산된 속성 캐시 대 메소드

🎜계산된 속성 대신 메소드와 동일한 함수를 정의할 수 있습니다. 최종 결과는 실제로 두 가지 방법 모두 동일합니다. 그러나 차이점은 계산된 속성이 종속성에 따라 캐시된다는 것입니다. 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다. 즉, 메시지가 변경되지 않는 한 reversedMessage 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다. 🎜계산된 속성이 종속성에 따라 캐시된다는 것은 무엇을 의미합니까? 🎜

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

로그인 후 복사

🎜🎜Date.now()의 값은 계속 변하지만 watch가 아니기 때문입니다. 반응형 종속성이 아닙니다. 🎜🎜참조: 여기🎜

CSS 스타일이 자동으로 접두사를 추가합니다.

🎜 v-bind:style가 와 같이 브라우저 엔진에서 접두사를 추가해야 하는 CSS 속성을 사용하는 경우 를 변환하면 Vue.js는 해당 접두사를 자동으로 감지하고 추가합니다. 🎜🎜참조: 여기🎜

`<template>` 요소에 v-if 조건부 렌더링 그룹화 사용

🎜v-if는 지시어이므로 요소에 추가해야 합니다. 요소. 하지만 여러 요소를 전환하고 싶다면 어떻게 해야 할까요? 이 시점에서 요소를 보이지 않는 래핑 요소로 처리하고 해당 요소에 v-if를 사용할 수 있습니다. 최종 렌더링에는 <template> 요소가 포함되지 않습니다. 🎜

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

로그인 후 복사

🎜🎜자세한 내용은 여기🎜

`v-if` 및 `v-show` 및 v-for

🎜🎜🎜v-if는 페이지 요소를 추가하고 제거하는 작업입니다🎜🎜🎜🎜v-show는 페이지 요소를 표시하고 숨기는 작업입니다🎜🎜🎜🎜v일 때 - v-for와 함께 사용하면 v-for가 v-if보다 우선순위가 높습니다. 🎜🎜🎜자세한 내용은 여기를 참조하세요.🎜

배열 변경 감지 고려 사항

🎜Vue는 모드가 변경된 배열을 감지할 수 없으므로 보기 업데이트가 트리거되지 않습니다🎜🎜🎜🎜 인덱스를 직접 사용합니다. 예를 들어 항목을 설정할 때: vm.items[indexOfItem] = newValue🎜🎜🎜🎜 배열의 길이를 수정할 때, 예를 들어: vm.items .length = newLength 🎜🎜🎜자세한 내용은 여기를 참조하세요🎜

객체 변경 감지 고려 사항

🎜Vue는 객체 속성의 추가 또는 삭제를 감지할 수 없습니다🎜

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

로그인 후 복사

🎜 🎜하지만 Vue.set(object, key, value) 메소드를 통해 중첩된 객체에 반응형 속성을 추가할 수 있습니다. 🎜일반적으로 사용되는 Object.asset() 메소드도 있습니다. 객체에 🎜여러 개의 새로운 속성🎜을 할당하려면 다음과 같이 해야 합니다🎜

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

로그인 후 복사

🎜🎜자세한 내용은 여기를 참조하세요🎜

`v-for`에서 `v-for` 메서드 사용

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

로그인 후 복사

🎜🎜자세한 내용은 여기를 참조하세요.🎜

구성 요소는 `v-for`

를 사용합니다.🎜사용자 정의 구성 요소에서는 를 사용할 수 있습니다. v-for. 🎜

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

로그인 후 복사

🎜🎜자세한 내용은 여기를 참조하세요🎜

`.once` 이벤트 수정자(2.1.4의 새로운 기능)

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

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

로그인 후 복사

🎜🎜.once는 🎜맞춤 구성 요소🎜에서도 사용할 수 있습니다. 🎜🎜자세한 내용은 여기를 참조하세요.🎜

`는` 기능

🎜일부 DOM 요소 자체의 일부 제한으로 인해 <ul>, <ol>,

<table>, <select> 이러한 요소에는 허용되는 요소에 제한이 있습니다. 🎜
<comp :foo.sync="bar"></comp>
로그인 후 복사
로그인 후 복사
🎜🎜는 다음 dom🎜🎜<comp :foo="bar" @update:foo="val => bar = val"></comp>
로그인 후 복사
로그인 후 복사
🎜🎜으로 구문 분석됩니다. 올바르게 구문 분석하려면 is를 사용해야 합니다. 기인하다. 🎜🎜this.$emit('update:foo', newValue)
로그인 후 복사
로그인 후 복사
🎜🎜이렇게 하면 DOM이 올바르게 구문 분석됩니다. 🎜🎜rreee🎜具体见:这里
将对象的所有属性作为 prop 进行传递
如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：
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>
로그인 후 복사
로그인 후 복사
具体见： 这里
非 Prop 特性的替换与合并

class 和 style这两个特性的值都会做合并 (merge) 操作
其他属性(如: type) 则会进行覆盖

具体见: 这里
Props的一般绑定和动态绑定
我们常用的一般是动态绑定:
// 父组件<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!'
로그인 후 복사
로그인 후 복사
具体见:这里

.sync 修饰符(2.3.0+新增)
之前在 2.0 版本中移除后，在 2.3.0 中又加上了，只是调用的逻辑发生了变化，变成了一种语法糖。
如下代码:
<comp :foo.sync="bar"></comp>
로그인 후 복사
로그인 후 복사
会被扩展为：
<comp :foo="bar" @update:foo="val => 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 v-model="foo" value="some value"></my-checkbox>
로그인 후 복사
上述代码等价于：
<my-checkbox  :checked="foo"
  @change="val => { foo = val }"
  value="some value"></my-checkbox>
로그인 후 복사
具体见:这里
插槽内容分发
我们不总能遇见我们的组件中包含了哪些元素，这时候我们在开发组件的时候，需要让这部分内容自定义。
假定 my-component 组件有如下模板：
<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>
로그인 후 복사
当然还有 具名插槽 、作用域插槽(2.1.0 新增)、slot-scope(2.5.0新增)
具体见:这里
动态组件
通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：
var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
로그인 후 복사
<component v-bind:is="currentView">  <!-- 组件在 vm.currentview 变化时改变！ --></component>
로그인 후 복사
注意这里的 is 与 之前说的 v-bind:is 别混淆
具体见:这里
对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', {
  template: '\    <div v-once>\      <h1>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"
로그인 후 복사