Vue概念理解
构建用户界面：将一个个数据变成页面展现出来给用户看。
组件化模式开发：将一个完整页面分割成几个大小不一的板块进行遍写开发，进行了板块分离后，板块将会被封装成一个盒子，互不影响。
板块还可以复用，一个.vue文件就是一个组件，一个组件包含三要素HTML的template模板，样式表css，脚本Js。
渐进式框架：按需引入，从小到大、从易到难。
命令式编程：被动（代码自上而下一步步按死规矩、按顺序执行，纯js）
声明式编程：主动、灵活（代码不需要按顺序执行）
比如老师渴了要喝水的例子。
命令式（老师吩咐你执行，你处于被动）：“老师渴了，xxx同学，你先站起来，凳子往后挪一下，把讲台上的水杯拿去开水间，给老师装满水，然后把茶叶烫一下，再泡。”
声明式（主动递水）：“老师你喝水！”
虚拟dom理解:其实就是三个环节，数据---虚拟dom---真实页面，直接将虚拟dom这个环节看成一个数据的中转缓存站或者是一个桥梁，将拿到的数据先经过虚拟dom进行第一轮的加工，加工过后，虚拟dom的数据就变成真正的dom，然后就可以进行页面的渲染，显示界面。
diff算法：差异对比算法，当数据发生变化时，vue是这样更新节点的，找到要更新的数据进行对应更新，计算出虚拟dom中被改变的部分,然后针对该部分进行原生DOM操作,而不用重新渲染整个页面。
vue的cdn版本引入：
- 开发版本：有报错提示信息，编写代码的时候用，vue.js未经过压缩。
- 生产版本：没有报错提示，是项目上线的时候采用，vue.min.js经过压缩。
将 Vue 应用挂载到一个 DOM 元素上(绑定容器)。
传统方式：
vue3.0的写法：先创建vue应用，然后挂载到跟节点上作为渲染的起点。
{{ message }}
const App = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(App).mount('#app') //关联容器
data 选项是一个函数，返回一个对象，Vue 在创建新组件实例的过程中调用此函数。
computed对比methods
- computed 依赖缓存、重新取值
- methods 重新渲染、重新调用
可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
监听属性 watch
watch 来查看data函数当中响应数据的变化。
全局配置: Vue.config.productionTip 阻止 vue 在启动时生成生产提示
一个容器只能对应一个vue实例，当多个同名容器对应一个实例，Vue默认是自上而下执行，只会在第一个容器生效。
多个vue实例对应同一个容器的情形，也只会在最先定义的容器生效：
所以vue实例和容器只能是一对一的关系。
vue的胡子语法：即使未经data函数定义数据，{{}}双大括号里是支持js表达式和运算符的。
{{1+1}}
{{10*2}}
{{Date.now()}}
{{message.toUpperCase()}}
{{a?'true':'false'}}
因为v-model默认收集value值，所以v-model等价于v-model:value，也就是一个语法糖。
v-model实现原理：
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
vue中获取dom元素是经过$ref绑定获取：
给元素添加ref属性 通过this.$refs.domName获取
key的作用:
key作为列表循环的唯一标识，作用主要应用了diff算法来高效的更新虚拟DOM。
路由懒加载和图片懒加载：
核心：按需加载
图片懒加载：鼠标滚轮滚到底部某个位置再加载出图片，而不是一开始就把所以图片加载出来呈现，那样会导致页面加载缓慢，卡顿。提高页面加载速度，不在可视区域内的图片先不加载，只有滚动到可视区域的时候才加载。
路由懒加载：鼠标点击的时候才加载跳转到某个位置，不点击就不加载该组件，避免页面一开始就加载所有的。 当页面很多，组件很多的时候，SPA页面在首次加载的时候，就会变的很慢。这是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面进行优化，就需要异步组件了。
vue路由的2种方式：hash模式和H5的history模式
- hash模式的url带#号
- history模式是我们正常看到url地址，history模式利用了 pushState() 和 replaceState() 方法（其中 replaceState() 方法是不能回退网页的），浏览器的历史记录栈： back()、forward()、go()
$route和$router的区别：
- $router为VueRouter的实例对象，里面有很多路由器对象，指向整个大的路由对象。
- $route相当于当前正在跳转的路由对象，指向我们当前映射配置中处于活跃状态的路由。
v-show和v-if的区别：
- v-show指令: 控制css的display隐藏属性变为none，只会编译⼀次；
- v-if指令: 是动态的向DOM树内添加或者删除DOM元素，不停的销毁和创建⽐较消耗性能。
- 如果某个场景下需要频繁点击则考虑使用v-show
常见的组件传值方式有哪些？
- 父子组件之间的通讯传值
- 兄弟组件传值
- 复杂组件之间的传值，Vuex状态管理
父子组件之间的通讯传值是如何实现的？
父传子：父组件先通过v-bind指令进行自定义属性的绑定，子组件在data函数中使用props选项进行接收父组件传过来的属性。
父组件：
父组件
子组件：
子组件:{{poetry}}
子传父：
子组件先绑定@click事件，然后在子组件的methods定义该函数，
在该函数里头通过$emit()触发自定义事件（第一个参数的事件名，第二个参数是携带参数），
父组件通过@绑定子组件通过$emit()传递过来的事件名，然后自己再重新定义一个新的事件名，在父组件的methods里使用传递过来的参数。
--------------------------------------------------------------------------------------------------------------------------------
以下也是一种理解方式：
子组件想要给父组件传值，需要绑定事件处理函数，
然后使用$emit()进行触发通知，告诉父组件，我要发送数据了，记得签收，
$emit()接受2个参数，第一个参数：事件处理函数的事件名称，第二个参数：传递的数据。
父组件想要接收子组件的传过来的值，需要在注册的子组件上通过@符
绑定在子组件$emit()里面事件处理函数的名称，然后再命一个新的事件处理函数。
在methods定义，再使用形参来接收。
把子组件传递过来的数据做一个保存，然后渲染在视图层上。
子组件：
子组件:
父组件：
父组件:{{showTitle}}
vue-router路由使用
当中的to属性是进行导航跳转，相当于a标签的href路径指定
动态绑定to属性：
如果在其他标签上使用导航跳转，只需如此打个tag标签：