vue注意点记录

修饰符

事件

只能用在原生dom上

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

注意点

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

可在自定义组件上使用

<!-- 点击事件将只会触发一次，可以用在自定义组件上的自定义事件 -->
<a v-on:click.once="doThis"></a>

.passive提升移动端性能

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">

系统修饰键

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle

v-model

.lazy
.number
.trim

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

v-for的key

注意，当不需要状态绑定的时候可以使用索引，当带有复选框等不行需要状态不一样的不能用，key具有唯一性

vue和new Vue

通过原型定义的在实例中是可以获取到的

import vuefrom 'vue'
vue.prototype.xxx={}
通过this是可以访问到的是一个实例对象
vue.xxx={}
不能通过this访问是一个静态对象

侦听器

watch默认是一个方法，但是当watch是一个对象时候的额外参数

watch：{
	// 定义对象格式的侦听器
        username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          },
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
        }，
         info: {
          handler(newVal) {
            console.log(newVal)
          },
          //侦听的是对象对象中属性发生变化不会出发侦听器同样要改成对象形式设置deep：true,，开始深入监听
          deep: true
        } ,
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }
}

axios

promise实例前面可以添加await前面是async修饰（axios）直接获取值
解构重命名{data:res}
axios.post第二个参数为请求体axios.get第二个为{params：“”}

style

scoped设置样式为当前组件，deep深入子组件修改样式

<style lang="less" scoped>

// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}
</style>

生命周期

beforeupdate初始是不会触发的
之后每回data变化都会变化

兄弟组件传递数据

建立jEventBus.js

import Vue from 'vue'

export default new Vue()

组件一

import bus from './EventBus.js'
send() {
      // 2. 通过 eventBus 来发送数据
      bus.$emit('share', this.str+this.val++)
    }

组件二（初始化时候直接监听）

import bus from './EventBus.js'
 created() {
    // 2. 为 bus 绑定自定义事件
    bus.$on('share', val => {
      this.msgFromLeft = val
    })
  },

prop

当赋值普通对象与赋值对象数组，添加默认值时候

 props: {
    init: {
     
      default: () => {},
      type: Object,
      // 必填项校验
      required: true
    },
   // 多个类型
    init: {
      default: () => [],
      type: [Object,Number],
      // 必填项校验
      required: true
    },
  },

数组和对象默认值必须是一个函数，因为他们不是基本类型，而是指向一个引用，另外,prop类型是只读的，不要试图去修改它，与此类似的，包括声明的data，也是一个函数，返回一个对象，还有vuex的state，也是作为一个函数，为了防止多个模块时候数据污染

ref

在 JavaScript 里直接访问一个子组件

<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。所以避免在模板或者计算属性中使用，同时当使用v-if控制元素后，ref或许并没有获取到，根据周期函数update可以得知，使用如下写法获取

this.$nextTick(() => {
        this.$refs.iptRef.focus()
      })

keep-alive

keep-alive生命周期，deactivated被缓存调用和activated被激活调用，使用位置在被缓存的组件中，使用keep-alive才会有这两个生命周期，
keep-alive的include指定哪些需要被缓存，多个用逗号隔开，不指定的会被销毁，exclude指定哪些不被缓存，多个用逗号隔开，两个属性不能同时存在
keep-alive注意点：当一个组件没有name名称时候，默认调试中是按注册名称的，keep-alive也是查找的默认名称，但是如果有name属性它则是按name属性查找的，实行缓存机制，注册的组件名称只是为了通过标签在代码中使用

slot

每个都有一个name属性
v-solt指令只能放到组件或者template（只起到包裹作用并不会真的被渲染）上，不能直接在标签上（v-solt:default）,简写（#default）
插槽上带数据叫做作用域插槽，#default=‘scope’可以使用解构
事件传对象改的是引用，直接把列表对象改了，传数值还得找到那一项

路由

路由就是hash地址和组件的连接，实际是锚链接()会产生历史记录，这个hash是location.hash
windows上边onhashchange事件改变获得hash值
windows.οnhashchange=()=>{
console.log(location.hash)
}
子路由不加斜线
子路由通过redirect默认，或者默认为空，
动态路由设置参数“/move:id”,获取参数$route,页面上可以不加this
$route路由参数对象
$router路由导航对象
路由用props传递，要打开props:true,可以方便拿到值这是路径参数，通过params取到
还有查询参数？形式，用query拿到，
$route对象中fullpath是完整地址，包括查询参数，path是路径参数
router.push会增加历史记录，replace会替换历史记录，go在浏览历史中前进后退
$fouter.back(),$router.forward()回退和前进
next（），next(hash),next(false)调至当前页面，hash地址默认规则不要大写，
当路由守卫判断特别多时可以把模块单独写到一个文件，写成一个数组，用indexof判断

vue-cli中中在执行时候import中会把所有import提前

vuex

mutations中一般为大写，actions一般方法为小写，devtools指向的是mutation

模块化之后使用mapXXX就不管用了，要在模块中加一个命名空间namespace：true，mapXXX(‘a’,[‘sum’])以此类推
但是如果不使用mapXXX则state要这么获取$store.模块名.state属性，但是actions或者mutation中则要this.commit(模块名/方法名，参数)、this.dispatch（模块名/方法名，参数），但是getters也是（模块名/方法名）但是不能通过’点’的形式设置属性，可以通过this.$store.getters[模块名/方法名].属性名获取
state与data一样为了防止引用造成的污染，使用一个函数返回（）=>({
})

es6

package.json声明type:“module”
按需导出用export，按需导入用{}fron 使用别名{s1 as str2} from
按需和默认导入导出可以单独写，但是不可以写两个默认导出 import aa,{bb,cc}from
如果没有导出任何代码则可以直接引用就行

promise

promise.then(res=>{},error=>{})

then-fs以promise形式读取文件，官方是不支持promise读取的
import thenfs from ‘thenfs’

thenfs.readfile().file

promise上一个返回值then是一个promise下一步可以用then调用
promise
.then(res=>{return new promise}).then().then().catch(捕获之前所有错误，只要报错后续then就不调用了)也可以往前提这样后边就可以正确执行

promise.all(异步操作数组按顺序执行).then(([])=>{})
promise.race(与all一样但是谁执行快谁先执行)
acync/awite 修饰后获取到是值
第一个awite之前的是同步执行，遇到awite会退出先执行同步，之后全是异步

promise是一个同步任务方法马上执行，但是.then是微任务

依赖注入

provide: function () {
  return {
    getMap: this.getMap
  }
}
inject: ['getMap']

响应式

import {computed} from 'vue'
provide: function () {
  return {
    getMap: computed(()=>this.getMap) 
  }
}
inject: ['getMap']