前端笔记--Vue

Vue基本使用

指令

• {{ msg }} 、v-text（会覆盖子文本）
• v-html 会有xss风险，会覆盖子组件
• 设置动态属性 v-bind: (简写:)
  <button v-bind:disabled="isButtonDisabled">Button</button>
• 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

• v-on:（简写@）监听DOM事件
• 修饰符 . 用于指出一个指令应该以特殊方式绑定

<form v-on:submit.prevent="onSubmit">...</form>
<input @keyup.enter="onCheck" />

• v-if
• v-show
• v-if和v-show的区别
  1.v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
  2.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗
  3.使用场景：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
• v-for
  v-for和v-if不能一起使用
• v-model

计算属性和监听属性

• computed
  对于任何复杂逻辑，你都应当使用计算属性。computed有缓存，data不变不会重新计算。
  
• watch
  当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
  1.当需要监听引用类型时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。
  2.watch监听引用类型，拿不到oldVal，
  

组件通讯

父子组件传值

任何组件的通讯，包括父子，兄弟，跨级

组件通讯
通过自定义事件实现兄弟组件通讯，在beforeDestroy时及时进行销毁，否则可能造成内存泄漏
1.需要创建一个空白vue实例作为兄弟间的桥梁(event.js)

import Vue from 'vue'
export default new Vue()

2.要传送数据的组件使用$emit触发接收数据组件的自定义事件并把数据传过去

import event from '../utils/event.js' 
export default {
  data () {
    return {
      msg: 'A组件数据'
    }
  },
  methods: {
    send: function () {
      event.$emit('receive', this.msg) // 使用 $emit 自定义事件把数据带过去
    }
  }
}

3.接收数据的组件使用$on监听自定义事件接收数据

import event from '../utils/event.js' // vue的空白实例（兄弟间的桥梁）
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    event.$on('receive', (val) => { // 监听事件receive，回调函数要使用箭头函数;
      console.log(val)
      this.msg = val
    })
  },
  beforeDestroy () {
    event.$off('receive')
  },
}

Vue生命周期

1.created和mounted区别
created完成了vue实例的初始化，页面还没开始渲染，mounted完成了页面的渲染
2.父子组件生命周期调用顺序

p created
s created
s mounted
p mounted
p beforeUdate
s beforeUdate
s updated
p updated
p beforeDestroy
s beforeDestroy
s destroyed
p destroyed

Vue高级特性

手动实现一个v-model

父组件

<template>
  <div id="app">
    <p>{{name}}</p>
    <HelloWorld v-model="name"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
    data(){
      return {
          name: 'vue'
      }
    }
}
</script>

子组件

<template>
  <div>
    <input type="text" :value = "val" @input="$emit('change',$event.target.value)">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  model: {
      prop: 'val',
      event: 'change'
  },
  props: {
    val: {
        type: String,
        default(){
            return ''
        }
    }
  },
}
</script>

补充：

1. <input type="text" v-model="name"> 实则等于 <input type="text" :value = "name" @input = "name=$event.target.value"> ，也就是说v-model就是绑定的了一个名为value的prop和一个input事件
   2.model属性，允许一个自定义组件在使用v-model时定制prop和event。避免与一些表单类型的value产生冲突。

$nextTick

定义：在下次DOM更新循环结束之后执行延时回调。在修改数据后立即使用该方法，获取更新后的DOM。

• Vue是异步渲染的
• data改变过后，DOM不会立即渲染
• $nextTick会在DOM渲染完成后被触发，以获取最新的DOM节点

什么时候需要用$nextTick

1.在created钩子函数中进行的DOM操作一定要放在Vue.nextTick()回调函数中
2.在改变数据后，基于新DOM进行的一系列js操作都需要放到Vue.nextTick()回调函数中

Vue.nextTick(callback)使用原理

Vue是异步渲染DOM的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环（event loop）中观察到数据变化的watcher推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效地去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
为了在数据变化之后等待 Vue 完成渲染 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) ，这样回调函数在 DOM 渲染完成后就会调用。

slot

具名插槽

元素有一个特殊的 attribute：name。一个不带 name 的 出口会带有隐含的名字“default”。任何没有被包裹在带有 v-slot 的