vue是一个mvvm前端框架，实现了数据与模型的双向数据渲染。使用它可以通过script标签引入vue.js库，也可以通过利用webpack打包工具，创建vue-cli脚手架。
vue
- 计算属性computed
数据依赖于其他动态数据，并随其他数据的变化而进行相应变化时，使用computed进行声明并计算。该属性将声明一个依赖于其他数据的属性，同时提供该属性的get方法，当侦听到依赖的数据变化时自动执行get方法进行重新计算。
注意点：
1、使用computed与methods进行计算的差别在于，computed的数据缓存基于依赖数据的变化，即只有当依赖的数据发生变化该方法才会重新执行，而使用方法进行计算，每次调用都会重新求值；
2、computed声明的属性不可在data中声明
- 侦听属性watch
侦听data中声明的动态数据，数据发生变化时自动执行；当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
侦听对象：
watch: {
obj1:{
handler: function(v){
},
deep:true // 对象深度侦听
}
}
侦听对象的某个属性：
方法一：
watch:{
"obj.name": function(new,old){
}
}
方法二：
(利用计算属性监听某个属性的变化)
computed:{
obj(){
return obj.name
}
}
watch:{
obj(n,v){
}
}
- 组件基础
全局注册：
通过vue.component('componenta',{})注册的组件为全局组件，即创建的所有vue实例都可使用该组件，弊端在于在使用打包工具构建时即使不需要某些组件，也会被构建进去。
局部注册：
在普通的js对象中注册一个vue组件,然后通过components属性引入
var componenta = {}
new Vue({
components:{
//自定义元素的名字，这个组件的选项对象
component-a : componetna
}
})
- prop
-
由父组件向子组件单向传递数据；子组件内可以对prop属性指定类型，子组件不可对prop数据进行更改，否则vue会发出警告；
-
父组件若传入非prop的特性，可能会覆盖掉子组件的原始特性，但class和style会进行合并；若在定义子组件时不想接受外部的特性可使用inheritAttrs: false,禁用特性合并，也可使用有了 inheritAttrs: false 和$attrs组合，你就可以手动决定这些特性会被赋予哪个元素
-
自定义事件
-
插槽
作用
在子组件内通过定义一个插槽，父组件可以在slot内插入自定义内容；
作用域： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
后备内容
在定义组件插槽时可为其设置后备(默认)内容，即当调用组件是不为其传入内容时显示的内容，后备内容的作用域仍然是在调用的模板作用域中
具名插槽
当需要多个插槽进行内容分发时，在定义组件时为每一个slot增加一个name属性，这样在调用组件并注入插槽内容时通过声明名字匹配插槽；未命名的插槽默认为default；
<template v-slot:name></template>
或简写为
<template #name></template>
注意点：在使用命名插槽时需要为默认名称的插槽也要带上default否侧会造成命名空间混乱
作用域插槽
//current-user 组件
// 插槽含有作用域props属性，属性可以进行结构赋值
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
// 组件调用处
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>