一、定义
vm代表：new Vue()实例对象，vc代表：VueComponent实例对象
this的归属问题：在vue组件使用中，常规函数function(){}的this都是指向当前实例对象，如果是箭头函数()=>{}，因为箭头函数是没有this的，会向外向上一层查找this；这一点在很多时候会用到这个定义，需要注意区别不同的使用场景
模块化：对js按功能来拆分，向外提供特定功能的js 程序，一般一个js文件就是一个js 模块。类似java的工具类。
组件化：用来实现局部(特定)功能效果的代码集合，通过对不同功能模块来拆分和封装。一个组件可包含html、css、js、资源文件等。和安卓组件化有点区别，安卓的组件化，每个组件可单独运行。前端组件类似于安卓自定义控件。当然前端也有自己的微前端功能。
-
传统多页面开发
image.png -
组件化开发
image.png -
非单文件组件:一个html文件中的js注册包含有n个组件。
image.png 单文件组件（SFC，Single File Component）：一个html文件只包含一个.vue父组件，每个子组件定义在这个 .vue 文件中。每个子组件.vue文件中包含了模板、脚本和样式三个部分。这种方式将一个组件的所有定义集中在一个文件中，提高了开发效率和代码的可维护性。
组件中的data必须是一个带返回值的函数
组件中的template对象内的内容必须要包含一个根元素
记住全局注册的行为必须在根 Vue 实例 (通过
new Vue) 创建之前发生。
二、非单文件组件：不常用
-
创建和使用
-
VueComponent对象
组件的实例对象本质是VueComponent对象。每调用一次Vue.extend()创建一个组件就对应创建一个新的VueComponent构造函数（注意不是创建了实例，是类，只有new 才能创建新实例）。VueComponent对象也是通过数据代理方式实现的，里面也会有_data()对象、setter（）和getter()函数等。
编写一个组件<ChildView/>标签也即只有<body> <ChildView/> </body>真正使用了后才是真正创建了一个组件实例对象。框架内部会直接帮我们new了一个实例对象，创建一个新的VueComponent实例对象，脚手架中只是省略了显示书写。
VueComponent对象与Vue对象的元素差异:
1.VueComponent对象el默认是组件布局根元素，且不需要自己写el设置；根Vue的el元素是模版id容器
2.VueComponent对象data必须是函数，根Vue的data元素是可以是函数也可以是对象
3.因为组件是可复用的 vue 实例，所以它们与new Vue（）是接收相同的选项，实例的属性内容几乎相同。例如computed、watch 、methods，以及生命周期钩子等
原型属性：显式原型属性
prototype（函数或类拥有），隐式原型属性_ _proto_ _（实例对象拥有）实例的隐式原型属性
_ _proto_ _永远指向自己的缔造者。弱一级的原型对象可以一直往上追溯到父一级的原型对象prototype，可以调用父级原型对象prototype中的函数和属性。
如：往Vue原型对象添加一个myX属性
Vue.prototype.myX=886
//原始方式创建
const student1 = Vue.extend({
template: `
<div>
<div>姓名：<input type="text" v-model="userinfo.name"></div>
<div>年龄：<input type="text" v-model="userinfo.age"></div>
</div>`,
data: function () {
return {
userinfo: {
name: '王林',
age: 18,
}
}
},
methods:{
showMy(){
//这里可以直接通过组件VueComponent访问到myX
console.log('showMy:'+this.myX)
}
}
})
三、单文件组件：比较常用
-
简单描述
用脚手架Vue-Cli创建的Vue项目，这个Vue项目只有一个index.html页面，其他页面都是.vue格式的组件。单文件组件特点是页面都是.vue格式的文件组成。
-
搭建Vue2脚手架：Vue-CLI（vue command line interface）
该方式创建的是单文件组件
-
ref属性
原生控件通过ref获取的是一个真实DOM元素，而子组件通过ref获取的是一个VueComponent对象
-
props组件参数属性
类似于java方法的形参。data：{ age:12 }和props:[ age ]如果这两个对象里面存在同名变量是互不兼容的，不可同名，props优先级更高。且在程序运行时是先执行扫描props后执行data，可以定义一个data:{myAge:this.age}区分开。
参数可以是字符串、布尔值、数值、也可以是一个函数
注意：在Vue组件中不建议修改父组件传递过来的props里面的参数值，虽然可以修改成功，有时候也可以简单实现特定功能，但是依然是不建议这样做的
由 子==》父 通信多种方式：
======组件通信1：子组件通过props函数参数方式向父组件回调通信=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
name: "ChildView",
props: {
myFunctionA: Function,
},
methods: {
showCall() {
this.myFunctionA(123456);
},
},
};
=====>父组件
<ChildView :myFunctionA="myFunctionB"/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子组件回调内容=" + obj);//子组件回调内容=123456
},
},
};
======组件通信2：子组件通过v-on:自定义事件方式向父组件回调通信=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//发射和触发实例身上的自定义事件myFunctionA
this.$emit("myFunctionA",123456);
},
},
};
=====>父组件
<ChildView v-on:myFunctionA="myFunctionB"/ >
或
<ChildView @myFunctionA="myFunctionB"/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子组件回调内容=" + obj);//子组件回调内容=123456
},
},
};
======组件通信3：组件通信2的变种，父组件通过ref与vc实例接收通信=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//发射和触发实例身上的自定义事件myFunctionA
this.$emit("myFunctionA",123456);
},
},
};
=====>父组件
<ChildView ref="demo"/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子组件回调内容=" + e);//子组件回调内容=123456
},
},
mounted(){
//模拟一个页面挂载显示3秒后绑定回调，点击子组件后回调收集信息的操作
settimeout(() => {
this.$refs.demo.&on("myFunctionA",this.myFunctionB)
}, 3000);
}
};
======组件通信4：全局事件总线，推荐的方式=======
=====>子组件ChildView
<div @click="showCall">点击回调父组件</div >
export default {
name: "ChildView",
methods: {
showCall() {
//发射事件myFunctionA
this.$bus.$emit("myFunctionA",123456);
},
},
};
=====>父组件
<ChildView/ >
export default {
name: "App",
methods: {
myFunctionB(obj) {
alert("子组件回调内容=" + e);//子组件回调内容=123456
},
},
mounted(){
//通过注册的$bus事件总线，监听
this.$bus.&on("myFunctionA",this.myFunctionB)
}
};
-
mixin(混入/混合)
功能：可以把多个组件共用的代码模块和配置提取封装成一个mixin对象来使用。mixin用于在多个组件间共享代码。它们允许你定义一组可复用的选项，然后将这些选项混合到任何组件的选项中。mixin可以包含组件的任何合法选项，如 data、methods、computed、watch 等。
自定义插件：更适合添加全局功能，如全局方法、指令、过滤器等。
mixin：更适合在多个组件间共享代码和逻辑。被导入的地方才生效。
第一步定义mixin，例如:
{
data(){},
methods:{},
mounted() {}
......
}
第二步使用mixin，例如:
(1).全局混入，在入口文件main.js:Vue.mixin(xxx)
(2).局部混入:mixins :「'xxx']
《----------mixin.js代码如下-----------》
export const myMixin1 = {
data() {
return {
//与组件同名count变量冲突，组件count优先级高(覆盖替换)
count: 0
}
},
methods: {
//与组件同名showCount()冲突，组件showCount()优先级高(覆盖替换)
showCount() {
alert(this.count)
}
},
mounted() {
//生命周期：如果组件也重新写了mounted() ，则会合并，
//组件优先级高，先调用组件mounted()，后调用mixin的mounted()方法
console.log('mixin mounted')
}
}
export const myMixin2 = {
......
}
----------》组件内局部引入mixin.js
import {myMixin1，myMixin2 } from '../mixins/mixin.js'
export default {
mixins: [myMixin1，myMixin2]
}
----------》项目全局引入mixin.js
import {myMixin1，myMixin2} from '../mixins/mixin.js'
Vue.mixin(myMixin1)
Vue.mixin(myMixin2)
-
自定义插件
在 Vue.js 中，自定义插件和 mixin 都是用来扩展 Vue 功能和代码复用的机制，但它们的用途和工作方式有所不同。
自定义插件主要用于向 Vue 添加全局功能，如全局方法、指令、过滤器、组件等。插件可以包含一个或多个功能，并且可以通过 Vue.use() 方法来安装到 Vue 应用中。插件的核心是一个对象或构造函数，必须提供一个 install 方法。
Vue.use()被调用引入插件后，就会扫描一遍插件内容。
-
scoped样式作用域和lang写法
未添加<style scoped >的时候，如果多个组件内节点定义同名class="demo"选择器，在不同组件内都写了demo样式，则各个组件内的demo样式会互相影响。添加scoped限制样式作用域就锁在当前组件中，通常会给子组件加上scoped。
注意：App.vue内的style可以被子组件访问到。
-
自定义事件
1.组件实例使用自定义事件：<ChildView v-on:myFunctionA="demoFunctionListener"/ >
2.组件内设置绑定： this.$emit("myFunctionA",123456);
4.组件内设置解绑单个自定义事件： this.$off("myFunctionA");
5.组件内设置解绑多个自定义事件： this.$off(["myFunctionA","myFunctionB","myFunctionC"]);
6.组件内设置解绑所有自定义事件：this.$off();
父组件往子组件传递函数的操作可以改写为自定义事件，因为传递函数到子组件的目的就是为了子组件能给父组件回调，自定义事件刚好满足这个需求。当然最好用全局事件总线方式。
-
全局事件总线
main.js中注册全局事件Vue.prototype.$bus = this
-
nextTick操作（比较常用和重要）
可以监听捕获Vue在下一次解析dom模板的动作。对于多次更新Vue数据导致的回调更新，可以在nextTick函数方法中在所有代码执行完毕后，统一 一次执行更新解析模版，这是一种Vue的优化机制。
-
配置代理服务
通过Vue脚手架便捷快速的配置代理服务器，解决浏览器同源策略问题，实现跨域请求。该方式配置的代理服务器会在脚手架的帮助下，运行在与当前浏览器项目同一个端口号上，所以可以实现代理服务的功能。浏览器和代理服务运行在同一端口同一个源上，规避了同源策略问题。
pathRewrite:设置正则表达式，将发送到目标服务的前缀替换为空字符串前缀。
-
第三方资源引用
-
插槽的使用
若子组件template 中没有包含一个 <slot> 元素，则该组件在父组件被使用的地方，起始标签和结束标签之间的任何内容都会被抛弃。
四、vuex插件
vuex是什么？
vuex 是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式。它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。每一个 vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件（注：跨不同组件）也会相应地得到高效更新。（这是用这个插件的主要目的）
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
（3）状态管理：管理数据的读/写，数据带有响应式特性。
Vuex用于多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。有点类似java中全局的静态变量和静态类方法，但是java的静态属性不具备响应式特性。
- VueComponents(客户):下单给Actions。
- Actions（服务员）：dispatch处理稍微复杂的业务逻辑。过于简单的可以直接绕过它，在组件直接使用commit操作到Mutations。
—》$store.dispatch("abc",xxxxx) abc方法名小写 - Mutations（厨子）：处理最后的数据成品。
—》$store.commit("Abc",xxxxx) ABC方法名大写 - Devtools（厨房监工）：开发者工具。监听Mutations变化。在整个vuex使用过程中，可以在Actions直接操作store的state内容。但是如此使用的话，开发者工具就无法监听Mutations且失去作用和意义了。
—》获取store内状态$store.state.aabbcc
搭建环境：vue2中，要用vuex的3版本；vue3中，要用vuex的4版本。vue2安装vuex：npm i vuex@3
- getters属性：是计算属性computed的孪生兄弟。当state中的数据需要经过加工后再使用时，可以使用getters加工。写在getters的计算方法也是全局通用的。
-
mapState，mapGetters
image.png
-
mapActions，mapMutations
注：incrementOdd，incrementWait；increment，decrement是几个自定义函数名
-
模块化命名空间
namespaced:true
优点：不同业务模块分不同的js文件编写不同的countAbout.js，personAbout.js对象状态文件，通过在store.js文件中导入后统一管理这些状态文件。
五、路由插件
-
介绍
vue单页面项目如何实现以往多页面html展示？
那就需要用到路由插件了。
使用路由技术，把多个组件按路由键值对形式保存起来，通过路由器展示想要展示的组件，实现多页面项目的效果。并且路由可以实现单个页面部分区域的组件显示和切换。
系统关键词：this.$router
切记是routes而不是routers， routes: [ { path: "/MyRouterA", component: MyRouterA }, ]vue2只能使用router3.0，在下载时指定版本号：npm i vue-router@3
-
多级路由（嵌套路由）
router.js中配置一级路由路径加‘/’，二级路由不需要‘/’。router-link中需要写组件的完整路径。
home，about路由组件都是顶级路由，news，message都是子路由。如下配置，要想让news在home的位置显示，那就必须把news拎出外面和home一层设置为顶级路由
-
路由命名
-
路由传参
1.query传参方式
to的字符串传参：参数简便的时候使用字符串
to的对象传参：参数较多的时候使用对象
2.params传参方式(常用)
-
props接受参数方式
-
历史栈replace属性使用
replace的权限是给到目标路由的，由它决定是否覆盖替换。
-
编程式路由导航：在js中操作路由，更加自由多样化
-
缓存路由组件
在一个tab导航切换组件中，缓存其中多个组件。如： <keep-alive :include="News,Message">
-
路由组件新增的生命周期钩子：activated，deactivated
-
路由守卫：相当于路由过滤器
全局守卫：router.js中设置前置守卫beforeEach和后置守卫afterEach
独享守卫：router.js中设置。只有一个独立的前置守卫beforeEnter
组件内守卫：在各个子助教中设置。beforeRouteEnter和beforeRouteLeave
全局守卫beforeEach和组件内守卫beforeRouteEnter都是组件实例创建之前调用，之后马上调用afterEach，
而beforeRouteLeave是当前组件实例离开的时候才会调用，到达目标组件后才会执行上一个组件的beforeDestroy。
-
路由器的两种工作模式
