vue知识点整理

组件中的data写成了一个函数，数据以函数返回值的形式定义，这样每复用一次组件，就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

v-if 在编译过程中会被转化成三元表达式，条件不满足时不渲染此节点 v-show 适用于需要非常频繁切换条件的场景

display: none、visibility:hidden、opacity:0之间的区别

三者共同点都是隐藏。不同点

visibility: hidden 会被子元素继承通过设置子元素 visibility:visible来显示子元素

opacity: 0 会被子元素继承，但是不能通过设置子元素opacity:1来重新显示

visibility: hidden 不会触发绑定的事件

opacity: 0 元素上面绑定的事件是可以触发的

transition 对于visibility是无效的

transition 对于opacity是无效的

v-once 被定义了v-once指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。
v-cloak 可以使用v-cloak 设置样式，这些样式会在vue 实例编译结束时，从绑定的HTML元素上被移除。当网络较慢，网页还在加载vue.js.从而导致vue来不及渲染，这时页面就会显示出vue 源代码。我们可以用v-cloak指令来解决。

<div id="app" v-cloak>
    {{ context }}
</div>

[v-cloak] {
    display: none
}

<!--完整语法-->
<a v-bind:href="url"></a>

<!--缩写-->
<a :href="url">

<!--动态缩写-->
<a :[key]="url">

站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝对不要对用户提供的内容使用插值。

所有的prop都使其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来不行。这样会防止从子组件意外变更父级组件的状态，从而导致应用的数据流向难以理解。

每次父级组件发生变更时，子组件的中所有的prop都将刷新为最新的值. 但是我们常常有改变prop值的需求

这个op 用来传递一个初始值：这个子组件希望将其作为一个本地的的prop 数据来使用可以定义一个本地的data property 并将这个prop作为其初始值

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

props: ['size'],
computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}

注意在js中对象和数组是通过引用传入的，所以对于一个数组或对象类型的prop来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态

computed是计算属性，依赖其他的属性值，并且computed的值有缓存，只有当计算属性的值发生变化才会返回内容，它可以设置getter 和 setter

watch监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作

总结：如果一个数据需要经过复杂计算就用computed,如果一个数据需要被监听并且对数据做一些操作就用watch

当vue 处理指令时，v-for 比 v-if 具有更高的优先级。需要一起使用时，可以采用计算属性。

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
</ul>

将会经过如下检查

this.users.map(function (user) {
    if(user.isActive) {
      return user.name
    }
  })

因此那怕我们我们只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表。

  computed: {
    activeUsers: function() {
      return this.users.filter(function(user) {
        return user.isActive
      })
    }
  },

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

这样子写

未完待续。。。