vue=计算属性、普通属性、方法、侦听属性
https://www.yiem.net/archives/3756.html
https://www.cnblogs.com/8023-CHD/p/11166151.html
计算属性：自动监听依赖值的变化，从而动态返回内容。
由两部分组成：get和set，分别用来获取计算属性和设置计算属性。
默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖
特点
数据可以进行逻辑处理，减少模板中计算逻辑
对计算属性中的数据进行监视
依赖固定的数据类型（响应式数据）
计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性; 二是计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 title还没有发生改变，多次访问 reverseTitle计算属性会立即返回之前的计算结果，而不必再次执行函数。
// 在组件中
methods: {
reverseTitle: function () {
return this.title.split(’’).reverse().join(’’)
}
}
computed和methods
共同点：computed能现实的methods也能实现；
不同点：computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。 而只要它的相关依赖没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。也就是说当我们不希望有缓存，用方法来替代。
两者最主要的区别：computed 是可以缓存的，methods 不能缓存；只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，就不会多次执行。网上有种说法就是方法可以传参，而计算属性不能，其实并不准确，计算属性可以通过闭包来实现传参：
:data=“closure(item, itemName, blablaParams)”
computed: {
closure () {
return function (a, b, c) {
/** do something */
return data
}
}
}
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果，我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。（缓存的效果）这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
watch和computed
watch 和 computed 的区别, 在 vue 里, 这两个方法都能监听数据的变化, 不同的是 computed 是只能读取不能写入, 而 watch 可以读取也可以写入
侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch。Watch中可以执行任何逻辑，如函数节流、Ajax异步获取数据，甚至操作 DOM（不建议）。
监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点
computed是根据页面发生变化而变化,他是用来计算的
watch属性是监听页面特定某个状态的变
共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。、；
不同点：watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。
watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作；
computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。Watch也可以检测computed属性。
总结
计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来的；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。
computed能做的，watch都能做，反之则不行
能用computed的尽量用computed
计算属性 vs 普通属性
可以像绑定普通属性一样在模板中绑定计算属性，但是它们在定义上有区别，即计算属性的属性值必须是一个函数：
data:{ //普通属性
msg:‘浪里行舟’,
},
computed:{ //计算属性
msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
return ‘浪里行舟’;
},
reverseMsg:function(){
//可以包含逻辑处理操作，同时reverseMsg依赖于msg,一旦msg发生变化，reverseMsg也会跟着变化
return this.msg.split(’ ‘).reverse().join(’ ');
}
}
父子组件间传值深度总结
父传子
https://www.h3399.cn/201906/701414.html
https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81
父组件传值给子组件，如果子组件不需要修改父组件的参数，可以使用这种方式！如果子组件要修改父组件中的参数，父组件必须用引用类型的参数传给子组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值为你需要传递给子组件的值，如果需要传递的值是变量，那么需要使用到绑定属性
在子组件定义的地方，添加了一个props选项，它的值是一个由自定义属性组合而成的数组或者是一个对象，如果需要数据类型的校验，则使用对象，否则可以使用数组，
在子组件的模板中，通过自定的属性名就可以获取到父组件传递过来的值
vue2.0中，子组件中不能修改父组件的状态，否则在控制台中会报错。
但是经我测试发现，这仅限于props为非数组及对象等引用类型数据，譬如字符串，数字等
如果props是对象的话，在子组件内修改props的话，父组件是不会报错的。
https://segmentfault.com/q/1010000008525755
Vue.component(‘my-component’, {
props: {
// 基础的类型检查 (null 和 undefined 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: ‘hello’ }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return [‘success’, ‘warning’, ‘danger’].indexOf(value) !== -1
}
}
}
})
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
props值为数组，或者对象的区别是
如果需要验证传递的数据类型的话，则使用对象方式
如果需要修改父组件传递过来的值的话，或者父组件传递来的值并不是子组件需要的话，使用对象方式（父组件必须用引用类型的参数传给子组件）
props参数为对象的时候，有三个重要参数，type，required，default
子传父
子组件中，通过某一个事件，执行 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …'给父组件传值') this.emit(‘my-event-test’, ‘11223344’)
}
在父组件调用子组件的地方，给它 绑定了 子组件中 自定义的事件，绑定事件中不要添加（），因为有默认参数，加（）就需要传参了，
<my-content @my-event-test = “getData”>
在父组件的methds中实现此事件，默认参数是从子组件那边接收到的值
methods：{
getData (val) {
console.log(val) // val是从子组件中获取到的默认值
}
}
子组件中，通过某一个事件，执行 this.$emit(‘自定义的事件’, ‘需要传递的值’)，在父组件调用子组件的地方，给它 绑定了 子组件中 自定义的事件，事件的实现由父组件实现，注意绑定事件中不要添加（），在父组件中实现时添加 参数，参数就是传递过来的值
2 - > 村长 ----- 广播
4 — 你 ---- 接收信息 ------ 首先必须得在村里
车 — 》 中央事件总线 ----- const bus = new Vue()
4 先表明可以 接收数据
bus.on(‘自定义事件’， function (val) {}) 2 如果想要发送消息 bus.emit(‘自定义事件’, val)
09非父子传值.html
弊端： 必须的先接收，然后发送才是有效的 ---- vue状态管理器
面试官问： 状态管理器的时候，你要想到组件间传值
2.4 动态组件
10动态组件.html
如果每一个组件内部含有 表单元素 ，默认在动态组件切换的时候，表单数据会有所丢失
11动态表单.html
可以使用 包裹动态组件，避免组件的重新渲染（手机按home键并不是退出了系统的应用程序）
12keep-alive.html
如果书写形式为 ,那么表示只有 a 和 b 的组件的装填会被保留，而其余的组件都是先卸载，需要的时候再装载， a 和 b为定义组件的时候的name选项的值
13include.html
组件的钩子函数有两大对比
销毁 创建 ---- 动态组件 14动态组件.html — 不会触发 activated 和 deactivated
显示 隐藏 ------ 动态组件 + keep-alive 15keep-alive.html — 所有的组件都只创建了一遍
生命周期钩子函数
beforeCreate
created
beforeUpdate
updated
beforeMount
mounted
beforeDestroy
destroyed
activated ----- 跟keep-alive配合使用 — 组件激活时调用
deactivated ----- 跟keep-alive配合使用 — 组件停用时调用
数据类型
https://www.cnblogs.com/c2016c/articles/9328725.html
检测js数据类型
https://www.cnblogs.com/yuanzhiguo/p/7811990.html
typeof
这是最基本的一个判断方式，该操作符返回一个表示数据类型的字符串，共有7种结果：number、string、boolean、object、function、undefined、symbol。很明显它不能区分引用数据类型里面的数组等对象（包括null）;
instanceof是用来判断A是否为B的实例，表达式：A instanceof B；如果A是B的实例则返回true，否则返回false；instanceof运算符是通过判断该对象在原型链上是否存在一个构造函数的prototype属性；
var a=[1,2,3];
var b=new Date();
console.log(a instanceof Array) //true
console.log(b instanceof Date) //true
instanceof也具有以下三点的不足：
1、不能检测null和undefined
console.log(instance_of(null instanceof null))
console.log(instance_of(undefined instanceof undefined)) 报错
2、通过构造函数实例化和字面量生成的基本类型判断是有一定区别的
constructor和prototype 非常相似，但 constructor 检测 Object 与 instanceof 不一样，还可以处理基本数据类型的检测。
var a=123;
var b=new Number(123)
console.log(a.constructor==Number) //true
console.log(b.constructor==Number) //true
constructor具有以下两点不足
1、null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。
2、函数的 constructor 是不稳定的，这个主要体现在把对象的原型进行重写，在重写的过程中很有可能出现把之前的 constructor 给覆盖了，这样检测出来的结果就是不准确的。
Object.prototype.toString.call()
这个是最准确最常用的方式，首先获取Object上面的toString方法，方法执行时让里面的this指向第一个参数的值。
Object 上的 toString 它的作用是返回当前方法执行的主体（方法中的 this）所属类的详细信息即"[object Object]",其中第一个 object 代表当前实例是对象数据类型的(这个是固定死的)，第二个 Object 代表的是 this 所属的类是 Object。
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call(null)) //[object Null]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call('123')) //[object String]
关于slot插槽
https://blog.csdn.net/kerelee_li/article/details/81662217
https://www.jianshu.com/p/7e3ababb2610
http://www.cppcns.com/wangluo/javascript/256028.html
https://www.jianshu.com/p/0c9516a3be80
它的使用场景是什么，很多解释都是“父组件向子组件传递dom时会用到插槽”，这并不能很好的解决我的疑惑。既然你用了子组件，你为什么要给她传一些dom，直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化，如果去重写子组件是很不明智的一件事，当然也可以将不同之处都写在子组件里，然后通过父组件传来的标识进行选择显示。其实质是对子组件的扩展，通过slot插槽向组件内部指定位置传递内容，即将元素作为承载分发内容的出口；
具名插槽
上面的例子只使用了一个slot插槽，但有时我们在一个组件里可能会多处使用插槽，我们希望在不同的插槽处插入不同的内容，此时便需要进行区分， 元素有一个特殊的特性：name。这个特性可以用来定义插槽的名字，在向具名插槽提供内容的时候，我们可以在一个 元素上使用
v-slot 指令，并以 v-slot 的参数的形式写出插槽的名称，使其一一对应。
为了使父组件的插槽内容可以使用子组件的数据，可以在 元素上绑定想要传递的数据，此特性被称为插槽 prop。同时在父级作用域中，给 v-slot 带一个值来定义我们提供的插槽 prop 的名字，便可获取到。但此内容只在 作用域内可用。
作用域插槽是啥?
官方一点的:父组件应用子组件可以给插槽填充内容，但一般只填充html标签，里边的数据信息要由插槽自己提供，这个过程称为作用域插槽
自己总结的俗话:父组件在用子组件来填充插槽的时候 有时候需要用到子组件里面插槽的数据 .
子组件文件插槽上带的数据 在父组件的子组件标签里 让一个标签 带有slot-scope=“xxx” 去接收 以便在下面进行调用
目前我的理解就是 在父子组件之间体现的比较多 所以就用父子组件举例
比如说 我在子组件文件里面来个插槽
匿名插槽具名插槽作用域插槽也就是带数据的插槽
具名插槽
匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区别。
最后，就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的template里面写
匿名插槽
具名插槽
复制代码
但是作用域插槽要求，在slot上面绑定数据。也就是你得写成大概下面这个样子。
export default {
data: function(){
return {
data: [‘zhangsan’,‘lisi’,‘wanwu’,‘zhaoliu’,‘tianqi’,‘xiaoba’]
}
},
}
js的各种模式
https://www.jianshu.com/p/60423b124cb4
单例模式
把描述同一个事物(对象)的属性和方法放在同一个命名空间下防止相互之间的冲突，实现了分组，这种编写代码的模式就是单例模式，可以用来进行模块化开发。
模块化开发即是根据需求将项目划分成不同的功能板块，分别进行开发，最后再进行合并。
虽然实现了分组，但是不能批量生产，属于手工作业模式
单例模式中给每个对象开辟的空间叫做命名空间
工厂模式
把实现同一个功能的相同代码放到一个函数中，只需要执行当前函数，就可以实现该功能，这种模式叫做工厂模式，也即，函数的封装(低耦合高内聚)，可减少冗余代码，提高代码的复用率
