手牵手系列之工作知识点总结

知识点总结"/>

手牵手系列之工作知识点总结

•  el-tree关于多选框变成单选问题

// template<el-treeclass="showtree":data="data"node-key="orgId":accordion="false"show-checkboxcheck-strictly:props="defaultProps"default-expand-all@check-change="handleCheckChange":filter-node-method="filterNode"ref="tree"></el-tree>// js// 单选
handleCheckChange(data, checked, node) {if (checked) {this.$refs.tree.setCheckedNodes([data])this.selectedObj = JSON.parse(JSON.stringify(data))}},

• app.vue只渲染一次的问题

使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

所以想要每次都渲染数据，就要在activated钩子函数中加入获取数据的函数，这样每次访问都会向后端请求数据

• v-if 和 v-for 互斥  

  永远不要把 v-if 和 v-for 同时用在同一个元素上。

  <!-- bad：控制台报错 -->
  <ul><liv-for="user in users"v-if="shouldShowUsers":key="user.id">{{ user.name }}</li>
  </ul>

一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

computed: {activeUsers: function () {return this.users.filter((user) => {return user.isActive})}
}<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li>
</ul>

• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。 

<!-- bad -->
<ul><liv-for="user in users"v-if="shouldShowUsers":key="user.id">{{ user.name }}</li>
</ul><!-- good -->
<ul v-if="shouldShowUsers"><liv-for="user in users":key="user.id">{{ user.name }}</li>
</ul>

• el-select与el-tree结合使用

<!--功能：下拉树筛选作者：lc时间：2021年07月15日 17:11:03版本：v2.1.3
-->
<template><el-select v-model="treeData" filterable clearable ref="select" :filter-method="filterHandle" @clear="delValue" placeholder="请选择案件类型"><el-option :value="treeDataValue" style="height: auto"><el-tree ref="tree" :data="treeList" :default-expand-all="false" :filter-node-method="filterNode" node-key="id" :props="defaultProps" @node-click="handNodeClick" /></el-option></el-select>
</template><script>
export default {name: 'selectTree',props: {},components: {},data() {return {treeData: '',treeDataValue: '',treeList: [],defaultProps: {children: 'children',label: 'name'}}},computed: {},watch: {},methods: {// 筛选filterHandle(val) {this.$refs.tree.filter(val)if (!val) {this.getsysLawCaseTypeList()}},filterNode(val, data) {if (!val) return truereturn data.name.indexOf(val) !== -1},// 清空delValue() {this.getsysLawCaseTypeList()},handNodeClick(data, node, nodeData) {this.treeDataValue = datathis.treeData = data.name// 选择器执行完成后，使其失去焦点隐藏下拉框的效果this.$refs.select.blur()this.$emit('getCaseData', data)},// 获取案件类型async getsysLawCaseTypeList() {try {let res = await this.$ajax.workbench.getsysLawCaseTypeList()if (res.code == 0) {this.treeList = this.listToTree(res.data)}} catch (e) {}},//list转成treelistToTree(oldArr) {oldArr.forEach(element => {let parentId = element.parentIdif (parentId != 0) {oldArr.forEach(ele => {if (ele.id == parentId) {if (!ele.children) {ele.children = []}ele.children.push(element)}})}})oldArr = oldArr.filter(ele => ele.parentId == 0) //这一步是过滤，按树展开，将多余的数组剔除；return oldArr}},mounted() {this.getsysLawCaseTypeList()}
}
</script> <style lang='less' scoped>
</style>
<style lang="less">
.el-tree-node__content:hover {background: #fff !important;
}
.el-select-dropdown__item.hover {background: #fff !important;
}
.el-select-dropdown__item {padding: 0;
}
.el-select-dropdown__item.selected {font-weight: normal;
}
</style>

• Vue.nextTick( [callback, context] )

 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {// DOM 更新了
})// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick().then(function () {// DOM 更新了})

•  Vue.set( target, propertyName/index, value )

参数：
{Object | Array} target
{string | number} propertyName/index
{any} value向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。// 数组var vm =new Vue({el:'#app',data:{items:['a', 'b', 'c']},methods:{btn(){Vue.set(this.items, 1, 'e')console.log(this.items)}}
})// 对象Vue.set(vm.userInfo,'address','beijing');

•  Vue.delete( target, propertyName/index )

参数：
{Object | Array} target
{string | number} propertyName/index// 示例data : {namelist : {id : 1, name : '叶落森'}       
}// 删除name
delete this.namelist.name;//js方法
Vue.delete(this.namelist,'name');//vue方法

• Vue.directive( id, [definition] )

参数：{string} id
{Function | Object} [definition]// 注册全局自定义指令 `v-focus`
Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素el.focus()}
})// 局部指令
directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}}
}<el-input v-focus />指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。

 自定义指令

• Vue.filter( id, [definition] )

参数：{string} id
{Function} [definition]// 全局注册
Vue.filter('my-filter', function (value) {// 返回处理后的值
})// 组件过滤器（局部）
filter:{my-filter:function(value){}
}<!-- 在双花括号中 -->
{{ message | capitalize }}<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器

• Vueponent( id, [definition] ) 

参数：{string} id
{Function | Object} [definition]用法：注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称// 注册组件，传入一个扩展过的构造器
Vueponent('my-component', Vue.extend({ /* ... */ }))// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vueponent('my-component', { /* ... */ })// 获取注册的组件 (始终返回构造器)
var MyComponent = Vueponent('my-component')// 定义一个名为 button-counter 的新组件
Vueponent('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})<div id="components-demo"><button-counter></button-counter>
</div>

•  Vue.use( plugin )

参数：{Object | Function} plugin插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：添加全局方法或者 property。如：vue-custom-element添加全局资源：指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-routerVue.use(MyPlugin)

 插件

•  data必须是一个函数

 data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

• props用法

类型：Array<string> | Objectprops 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
default：any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required：Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator：Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。// 简单语法
Vueponent('props-demo-simple', {props: ['size', 'myMessage']
})// 对象语法，提供验证
Vueponent('props-demo-advanced', {props: {// 检测类型height: Number,// 检测类型 + 其他验证age: {type: Number,default: 0,required: true,validator: function (value) {return value >= 0}}}
})

props

• computed

计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

计算属性缓存 vs 方法:两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

注意：我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

• methods

 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

• watch

 watch: {a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深c: {handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用d: {handler: 'someMethod',immediate: true},// 你可以传入回调数组，它们会被逐一调用e: ['handle1',function handle2 (val, oldVal) { /* ... */ },{handler: function handle3 (val, oldVal) { /* ... */ },/* ... */}],// watch vm.e.f's value: {g: 5}'e.f': function (val, oldVal) { /* ... */ }}

 注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

生命周期钩子

注意，不能使用箭头函数来定义一个生命周期方法 。

• beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• created

 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

• beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。

• mounted

 注意，dom已经挂载，可以对dom进行操作。mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been rendered})
}

该钩子在服务器端渲染期间不被调用。

• beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

• updated 

 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been re-rendered})
}

 该钩子在服务器端渲染期间不被调用。

• activated

被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

//index.js
{path: '/1',name: 'components1',component: Components1,meta: {keepAlive: true   //判断是否缓存}},
{path: '/2',name: 'components2',component: Components2,meta: {keepAlive: false}
},// 然后我们的App.vue中只需要判断其keepAlive值即可
<template><div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><router-view v-if="!$route.meta.keepAlive" /></div>
</template>但如果该组件中没有使用缓存，也就是没有被<keep-alive>包裹的话，activated是不起作用的。组件1中只执行activated钩子钩子函数，而组件2则把创建和挂载的钩子函数都执行了。
这就是缓存的原因，components其对组件进行了缓存所以并不会再一次执行创建和挂载。简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。

• deactivated

被 keep-alive 缓存的组件停用时调用 

该钩子在服务器端渲染期间不被调用。

• beforeDestroy (可以用于清除定时器、缓存)

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

使用场景： 比如用户在提交form表单时，在内容填写 到 提交表单过程中，有后退或其他操作时可以在这个钩子提示内容尚未提交或保存，是否退出之类的

• destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

• errorCaptured

 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

vue 里 this.$parent 作用

this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！

注意，尽量避免使用 this.$parent

组件必须相互保持独立，Vue 组件也是。如果组件需要访问其父层的上下文就违反了该原则。

如果一个组件需要访问其父组件的上下文，那么该组件将不能在其它上下文中复用。

provide / inject

类型：provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }示例：// 父级组件提供 'foo'
var Provider = {provide: {foo: 'bar'},// ...
}// 子组件注入 'foo'
var Child = {inject: ['foo'],created () {console.log(this.foo) // => "bar"}// ...
}

 provide-inject

慎用 provide/inject

既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？

我在前面提到过，Vuex 和 provide/inject 最大的区别在于，Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的，换句话说，你不知道是哪个组件修改了这个全局状态。

.sync的本质

<Component :foo="val"@update:foo="(payload)=>{ val = payload }"
/>
<!-- 实质是 语法糖 -->
<Component :foo.sync="val" />// 子组件使用
this.$emit('update:foo', payload)

$attrs的本质

父组件以形如:foo="xxx"或者v-bind="{age:12}"传给子组件的属性，但凡没有被子组件的props接收的，都会被扔到子组件的$attrs里去。（另外，被props指名接收的，都放入子组件的$props里。）

 $listeners的本质

父组件以 @eventName="fn" 或者 v-on:eventName="fn" 对子组件挂载事件监听。对子组件而言，父组件监听的事件都放在$listeners里。如果子组件对后代组件使用v-on="$listeners"，相当于对后代组件批量挂载了父组件对自己的事件监听。因此后代组件的emit会触发父组件的事件方法。

案例

A组件代码更新如下<template><div><child-dom:foo="foo":coo="coo"v-on:upRocket="reciveRocket"></child-dom></div>
</template>
<script>import childDom from "@/components/ChildDom.vue";export default {name:'demoNo',data() {return {foo:"Hello, world",coo:"Hello,rui"}},components:{childDom},methods:{reciveRocket(){console.log("reciveRocket success")}}
}
</script>
b组件更新如下<template><div><p>foo:{{foo}}</p><p>attrs:{{$attrs}}</p><childDomChild v-bind="$attrs" v-on="$listeners"></childDomChild></div>
</template>
<script>
import childDomChild from './childDomChild';
export default {name:'child-dom'props:["foo"],inheritAttrs:false,
}
</script>
c组件更新如下<template> <div><p>coo:{{coo}}</p><button @click="startUpRocket">我要发射火箭</button></div>
</template>
<script>export default {name:'childDomChild',props:['coo'],methods:{startUpRocket(){this.$emit("upRocket");console.log("startUpRocket")}}}
</script>

类数组转化成数组的方法

// 扩展运算符
function f1() {console.log(arguments);let arr = [...arguments];console.log(arr);
}
f1(1,32,43,4);// Array.from()
function f1() {console.log(arguments);let arr = Array.from(arguments);console.log(arr);
}
f1(1,32,43,4);// slice方法
function f1() {console.log(arguments);//console.log(arguments instanceof Array);//console.log(arguments instanceof Object);let arr = Array.prototype.slice.call(arguments);console.log(arr);let arr1 = [].slice.call(arguments);console.log(arr1);
}
f1(1,32,43,4);

for in 与 for of区别

for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。 

for … in循环将把name包括在内，但Array的length属性却不包括在内。

for … of循环则完全修复了这些问题，它只循环集合本身的元素。（更加适合遍历数组）

箭头函数基本特点

1、箭头函数this为父作用域的this，不是调用时的this2、箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
普通函数的this指向调用它的那个对象。3、箭头函数不能作为构造函数，不能使用new4、 箭头函数没有arguments，caller，callee5、箭头函数没有原型属性6、箭头函数常见错误let a = {foo: 1,bar: () => console.log(this.foo)
}a.bar()  //undefined
bar函数中的this指向父作用域，而a对象没有作用域，因此this不是a，打印结果为undefinedfunction A() {this.foo = 1
}A.prototype.bar = () => console.log(this.foo)let a = new A()
a.bar()  //undefined
原型上使用箭头函数，this指向是其父作用域，并不是对象a，因此得不到预期结果

• 指令缩写 

用 : 表示 v-bind:

用 @ 表示 v-on:

用 # 表示 v-slot:

<input:value="newTodoText":placeholder="newTodoInstructions"><input@input="onInput"@focus="onFocus"><template #header><h1>Here might be a page title</h1>
</template><template #footer><p>Here's some contact info</p>
</template>