vue学习总结
1.Vue的两个核心：
数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。
2.在vue中is的使用场景：
改变html标签的默认规则，比如ul里放li，dl里放dt等，
动态切换组件：
<component v-bind:is="currentView"></component>
特殊嵌套：
<table>
<tr is="my-row"></tr>
</table>
3.常用指令及常用事件修饰符
 |
 |
4.v-if和v-show的区别：
v-show通过控制display：none，v-if通过删除节点。
频繁操作元素显示隐藏使用v-show
v-show和v-if都可以控制元素的显示与隐藏。
5.渐进式框架
主张最少 框架分层
最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具
6.组件的定义
Vue最核心的功能之一，类似自定义标签，但是它具有独立的HTML+JS，独立的数据管理
组件的优势：重用性比较高、自由组合
7.组件的作用如何定义组件和使用组件
组件是可复用的Vue实例,如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。
8.定义组件有两种方式：
全局方式
直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。
局部方式
三部曲1.创建这个组件；2.注册这个组件；3.使用这个组件
9.组件化
一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
特点:
- 提高开发效率
- 方便重复使用
- 简化调试步骤
- 提升项目的可维护性
- 便于协同开发
10.组件中data为什么不是一个对象而是一个函数
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
11.深度监听
<body>
<div id="app">
{{address.province}} - {{address.city}} - {{address.area}}
{{skills}}
</div>
</body>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
address:{province:'贵州省',city:'遵义市',area:'汇川区'},
skills:['吃饭','做饭','拖地']
},
watch:{
address:{
deep:true,
handler(newValue){
console.log(newValue);
}
},
skills:{
deep:true,
handler(newValue){
console.log(newValue);
}
}
}
})
</script>
深度监听使用方法
watch:{
myObj:{
handler(newValue, oldValue) {
//执行操作
},
deep: true
}
}
12.计算属性对比监听函数
计算属性与普通data中的属性区别在于，计算属性可以通过一些运算逻辑返回属性值， 函数会在相关属性值变化时自动执行，也就是说计算属性也是动态绑定的。场景：主要是对data里面的数据进行过滤，往往过滤的过程中不应该影响原始数据
- 1.意义不同：计算属于用于返回一个计算结果、watch是完成一系列动作
- 2.异步代码：watch可以包含异步操作，计算属性不行
- 3.缓存效果：重新渲染值不变化,计算属性会立即返回之前的计算结果，watch不能缓存
13.Watch和computed的区别
computed特性
- 1.是计算值(过滤data中的数据)
- 2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
- 3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
watch特性
- 1.观察的动作
- 2.应用：监听props，$emit或本组件的值执行异步操作
- 3.无缓存性，页面重新渲染时值不变化也会执行
14.computed和method的区别
- computed是响应式的，methods并非响应式。
- computed是带缓存的
- computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的
- computed是以对象的属性方式存在的，在视图层直接调用就可以得到值
15.父子组件如何传值
父：<son :msg="msg"></son>
子：props: ['msg']
子：this.$emit('fun', 参数)
父：<son @fun="fun"></son>
总结：父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息非父子关系的通过创建一个新的Vue实例，用于数据传递通过$on()绑定一个自定义事件、通过$emit()去触发这个事件并传参
16.生命周期
- beforeCreate[创建实例之前]
- created[创建实例之后]
- beforeMount[挂载之前]
- mounted[挂载之后]
- beforeUpdate[数据更新之前]
- update[数据更新之后]
- beforeDestroy[销毁之前]
- destroy[销毁之后]
- activated[激活]
- deactivated[失活]
17.第一次页面加载会触发哪几个生命周期钩子函数
- beforeCreate[创建实例之前]
- created[创建实例之后]
- beforeMount[挂载之前]
- mounted[挂载之后]
18.自定义指令
钩子函数及其参数
- bind(el,binding); //指令第一次绑定到元素时调用,只调用一次
- inserted(el,binding); //被绑定元素插入父节点时调用
- update(el,binding); //被绑定元素所在的模板更新时调用
- unbind(el,binding); //只调用一次，DOM元素被VUE移除时调用(不可以手动解除绑定)
19.MVVM设计模式
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model
20.动态绑定class的方法
对象方法：
:class="{ 'active': isActive }"
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
绑定并判断多个
:class="{ 'active': isActive, 'sort': isSort }"
第二种（放在data里面）
:class="classObject"
data() {
return {
classObject:{ active: true, sort:false }
}
}
数组方法
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
:class="[isActive?'active':'']"
:class="[isActive==1?'active':'']"
