vue注意的地方

数组更新检测

变异方法 (mutation method)

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变异方法。比如 example1.items.push({ message: 'Baz' })。

替换数组

变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

  1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

 

对象变更检测注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

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

vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

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

你应该这样做：

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

 

vue组件is的特性

is的诞生

组件功能是vue项目的一大特色。组件可以扩展html元素，可以封装可重用的代码，可以增加开发效率。它是自定义元素，vue.js的编译器为它添加特殊功能。有些情况，组件也可以是原生HTML元素的形式，以is特性进行扩展。

那么is特性究竟是什么呢？有什么用途呢？

其实简单的来说，因为vue模板就是dom模板，使用的是浏览器原生的解析器进行解析，所以dom模板的限制也就成为vue模板的限制了，要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制，所以导致有些组件没办法放在一些标签中，比如<ul></ul>  <select></select><a></a> <table></table>等等这些标签中，所以需要增加is特性来扩展，从而达到可以在这些受限制的html元素中使用。例如：

  

<ul>
  <li is="my-component"></li>
</ul>

而不能使用下面的方式，因为下面的方式会将自定义组件<my-component>当做无效的内容，导致错误的渲染结果

1
2
3
<ul>
  <my-component></mu-component>
<ul>

　　其实两种写法表达的意思是一致，但是第二种写法是不合法的，会导致错误。

is的用法

<component> + is 的骚操作

<!-- 组件会在 `件名` 改变时改变 -->
<component :is="组件名变量"></component>

只要在data里弄个变量，给变量赋值就能动态的切换组件。这个其实在某些场景还是非常好用的安利一下。

 

 

全局注册和局部注册

1全局注册实例(按照官网的例子下面是代码)

<div id="app">
<com-btn></com-btn>
<com-btn></com-btn>
</div>
<script>
Vue.component('com-btn',{
data:function(){
return{
num:0,
}
},
template:`<button v-on:click='change'>点我{{num}}次</button>`,
methods:{
change:function(){
this.num += 1;
}
}
})
var vm = new Vue({
el:'#app',
data:{

},

})
</script>
我们在注册一个组件的时候需要给他起一个名字比如com-btn，从上面的代码我们可以看见

Vue.component('my-component-name', { /* ... */ })
这个组件名字就是我们注册的这个组件com-btn的第一个参数.这个组件就是全局注册的，在他们注册之后，我们可以用在任何新创建的vue根实例(new Vue)里面。

值得注意的是所有组件必须写在根实例的前面才会生效，

2局部祖册的实例

<script>
var childcom ={
data:function(){
return{
num:0,
}
},
template:`<button v-on:click='change'>点我{{num}}次</button>`,
methods:{
change:function(){
this.num += 1;
}
}
}
var vm = new Vue({
el:'#app',
data:{

},
components:{
'com-btn':childcom,//调用这个组件
}

})
</script>
局部注册的好处 就是当你使用的是webpack这样的构建系统时，如果是用全局注册的这种方法注册的组件，那么当你不使用某一个组件的时候，它仍然会存在最终的构建结果之中，这就增加的无谓的js下载。

所以我们可以通过一个简单的js对象来注册组件

var ComponentA = { /* ... */ }
在需要使用这个组件时， 你只需要在你的你的根实例里面去调用这个定义的组件即可。

new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
值得注意的是根实例的属性名字是components，千万不要忘记s。组件中的其他属性和实例的一样但是data必须是一个函数。

对于components对象中的每个的属性来说就是自定义组件的名字，属性值就是这个组件的选项对象。

局部注册的组件在其子组件中是不可用的，如果你希望componentA在componentB中可以使用那你需要下面这样写法：

var ComponentA = { /* ... */ }

var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}

 

vue的props和$attrs

 

过去我们在vue的父子组件传值的时候，我们先需要的子组件上用props注册一些属性：

复制代码
<template>
    <div>
        props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}}
    </div>
</template>

export default{
    props: ['name','age']
}
复制代码

然后父组件调用的时候当属性来传值

<child name="rick" :age="18"></child>

如果我们给child传props没有注册的属性，我们就要用$attrs来取了

<child name="rick" :age="18" gender="male"></child>

child:

复制代码
<template>
    <div>
        props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}} 
        <br>
        attrs: {{$attrs['gender']}}  在$attrs里面只会有props没有注册的属性
    </div>
</template>

export default{
    props: ['name','age']
}
复制代码

当然这个$attrs是vue2.4才推出的，为了简化父组件和孙组件的传值：

父组件 template（假设gender属性没有被props注册）:
<child1 gender="male"></child1>
child1 template(v-bind=”$attrs”，这是v-bind唯一可以直接跟等号的特殊写法):
<child2 v-bind=”$attrs”></child2>

在child2里面，就可以直接用props注册gender,来直接获取来自“祖父组件”的gender值了（当然，不注册也是可以用$attrs来取值的）

 

$listeners和.sync

posted @ 2019-06-10 21:13  野生夜神月  阅读(212)  评论(0)  编辑  收藏  举报