vue笔记

Vue的生命周期：

从Vue实例，创建到销毁的过程。

钩子函数：内置函数，自动执行

阶段：

初始化，挂载，更新，销毁

钩子函数：

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

Vue实例从创建到编译模板执行了beforeCreate 、（data，methods创建。数据检测、数据代理完成）created（发ajax请求得到数据放到data中）。

Vue实例从创建完成到显示经历了那些钩子函数？（解析模板，生成虚拟DOM（内存中）） beforeMount 【页面呈现的是未经Vue编译的Dom结构。不能获取真实Dom，不能在beforeMount中操作Dom，最终无效因为下一步又会挂载真实Dom覆盖了】

mounted 页面呈现的是经过Vue编译的Dom结构。（真实Dom插入页面）【能获取真实Dom，解析完模板把初始的真实DOM挂载到页面（相当于页面加载完）】

data数据发生改变才执行beforeUpdate updated。

只能在updated中获取更新后的值

beforeUpdate 数据改变之后DOM更新之前

如何销毁一个Vue实例？v-if=‘false’

beforeDestroy destroyed场景：移除全局事件，移除当前组件，计时器，定时器，eventBus移除事件$off

axios.defaults.baseURL='http://127.0.0.1:3006’设置请求根目录

Vue中获取原生DOM元素的2种方式：

（1）document.querySelector(‘id’)

（2）

this.$refs.name

ref还可获取组件对象,调用组件方法或属性，子传父

注册组件名还可以用组件的name属性 注册；

this.$nextTick（（）=>{}）数据更新后DOM异步更新完毕后执行（点按钮输入框出现并聚焦）

$nextTick（）原地返回promise对象

异步任务分为宏任务和微任务。

宏任务：1异步Ajax请求2.setTimeout、setInterval 3.文件操作4.其他

微任务：1.Promise.then、.catch、.finally 2.process.nextTick

执行顺序：每一个宏任务执行完之后，都会去检查是否有待执行的微任务，如果有执行完所以微任务之后，再继续执行下一个宏任务

交替执行· 先执行所有同步任务在执行微任务在执行下一个宏任务

props：{

background：String,//外部插入此变量的值必须是字符串类型

color:{

type:String,
default:'#fff' //外部插入此变量的值必须是字符串类型，不传默认#fff

},

title:{

   type:String,
  required:true //必须传入此变量的值

}

} axios添加到vue的原型上：Vue.prototype.$axios=axios

不必再自己引入axios变量，全局都有$axios属性 动态组件的切换（内置component组件配合is属性）：设置挂载点

data中comName=‘组件名’

组件缓存：

Vue内置组件把频繁切换的组件包起来

避免频繁创建和销毁

组件缓存 下，多了两个钩子函数：activated(){激活状态}、deactivated（）{失去激活状态}

当组件内一部分标签不确定怎么办？用插槽技术

组件插槽使用：

1.组件内占位

2.父组件中使用组件，插入具体的标签替换到slot位置上

口诀：子组件(slot)挖坑，父组件填坑

插槽默认内容：

<slot>默认内容</slot>                                                                                                                                                       

具名插槽（多处不确定内容）

子组件：<slot name=" title"></slot>
父组件<template v-slot:title> 内容</template>
	<template #title> 内容</template>

作用域插槽（场景：使用插槽技术时，需要用到子组件内的变量）

口诀：

1. 子组件, 在slot上绑定自定义属性和子组件内的要传入的值
2. 使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名” （{{scope.row.objOne}}）
3. scope变量名自动绑定slot上所有属性和值

v-cloak指令没有值

1.特殊属性，Vue实例创建完毕并接管容器后自动删掉v-cloak属性

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题（[v-cloak]{display：none}） v-pre：

1.跳过其所在节点的编译过程

2.可利用它跳过没有使用指令语法和插值语法的节点，加快编译

v-once:

1.v-once所在节点在初次动态渲染后（初始值），就视为静态内容了

2.以后数据的改变不会引起v-once所在结构的更新，可用于优化性能

自定义指令：

1.函数式：（局部）

directives:{

 big(element,binding){
      element.innerText=binding.value*10  //big函数何时会被调用？1.指令与元素绑定时,一上来（插入页面之前。所以.focus不奏效）2.指令所在模板被重新解析时

}

}

2对象式（区别;多了inserted钩子）：（局部）

directives:{

 ‘f-bind’：{
bind(element,binding){  //指令与元素绑定时,一上来（插入页面之前。所以.focus不奏效）
element.innerText=binding.value
           },
inserted(element,binding){ //指令所在元素被插入页面时，所以.focus奏效
element.focus()
           },
update(element,binding){//指令所在的模板被重新解析时
element.innerText=binding.value
             }
        }
   }       

注意：指令名小写，有-加引号。指令函数内this指向window

全局指令：

`

    Vue.directive('指令名'，function(element,binding){
    element.innerText=binding.value*10  })
    
     Vue.directive('指令名'，{
bind(element,binding){  //指令与元素绑定时,一上来（插入页面之前。所以.focus不奏效）
element.innerText=binding.value
           },
inserted(element,binding){ //指令所在元素被插入页面时，所以.focus奏效
element.focus()
           },
update(element,binding){//指令所在的模板被重新解析时
element.innerText=binding.value
             }
        }
   })