vur如何去除url中的#vue-router默认使用hash模式，路由加载自带#可以使用router另一种模式history 当启用history模式时，需要配合后台一起修改，不然会出现404，后台不认识没有#的url mvc：手动书写大量的dom操作mvvm:model和view绑定，一旦修改自动触发通知机制(只能)，无需手动dom操作 虚拟Dom树：仅包含可能变化的节点的可能变化的属性的树结构,其他的都不关心,内容精简,体量轻 为什么设计这种dom树的存在:内容少，便于快速查找如何作用:当模型中变量改变时,会通知dom树，虚拟dom树缓存本次修改在元素对象上，将一批修改的新dom子树和原来的dom树作对比，一旦发现不同，就只更新发生变化的dom树 4个阶段8个钩子函数创建:beforCreate();created()(创建完自动触发，有data,可发ajax)挂载:beforMounte();mounted()(有了dom树)更新:beforUpdate();update();销毁:befroDestory();distory(); 父传给子：:data:"data" props子给父 :$emit全局通讯:vuex 前端路由：router为vueRouter实例，想要导航 到不同的url，则使用router为vueRouter实例，想要导航到不同的url，则使用router.push()方法hash模式：
computed事件和methods的区别1.computed计算属性是基于他们的依赖进行缓存只有相关依赖发生变化时对于methid,只要发生重新渲染，method总会执行该函数
自定义指令keep-alive的了解keep-alive是vue内置的组件，可以使被包含的组件保留状态，组件被缓存
vue中的key 的在作用提高查找的效率，提高修改的速度
active-calss用在vue-router模块的router-link组件，用exact匹配
router的嵌套写法routers:[ {path:"/",component:Home,children:[ {path:"/",conponent:Details}, {path:"/details",compinent:Details}, ]}, {path:"/login",component:Login}, {path:"*",component:NotFount}]路由之间的跳转//1.标签跳转// 2.this.$router.push({ //核心语句 path:'/select', //跳转的路径 query:{ //路由传参时push和 //query搭配使用 ，作用时传递参数 id:this.id , } }) //3、this.$router.replace{path：‘/’ }[h3]懒加载(按需求加载)[/h3]vue首屏加载非常慢；打包应用时，将所有的打包在一个文件中，导致js代码非常庞大，严重影响页面加载：解决:1.配置打包工具，将组件分别打包到不同js代码块中去 - const Index=()=>inport(@/views/Inddex.vue)
[h3]vuex是什么？怎么使用？哪种场景使用它？[/h3]vue是一个全局仓库场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车 全局指令:在Vue对象中的directive方法里面有两个参数，一个是指令名称，另一个是函数组件内定义指令:directives钩子函数：bind(绑定事件触发)，inserted(节点插入触发),uppdate(组件内相关更新)钩子函数:el,binding v-if(判断是否隐藏),v-for(把数组遍历出来)v-bind(绑定属性);v-model(实现双向绑定) 第一步：需要observe的数据对象进行地柜遍历，包括子属性对象的属性，都加上setter个getter,这样的话，给对象的某个值赋值就会触发setter，继而就能监听到数据变化第二步：conpile解析模板指令，将模板中的变量替换数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定跟新函数，添加监听数据的订阅者，一旦数据变动，收到通知，跟新视图第三步：watcher订阅者是Observer和Compile之间的通讯桥梁，主要工作：1.在自身实例化属性时，往属性订阅器里添加自己2.自身必须有一个update()方法3.待属性变动depp notice()通知时，调取自身的update()方法，并触发conpile中绑定回调，则功成身退第四步：mvvm作为数据绑定的入口，整合了Observer,Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析变异模板 指令，最终利用Watcher和Compile之间的通讯桥梁达到数据变化-->视图交互变化-->数据model变更的双向绑定效果
getter特性是什么？getter 可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters action类似于muation;不同在于action提交的是mution,二不是直接更改状态 action可以包含任意异步操作 在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。 如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回 可维护性会下降，你要修改数据，你得维护 3 个地方可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背 vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property setget 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的vue 组件； Vue.use(Vuex) 方法执行的是 install 方法，它实现了Vue 实例对象的 init 方法封装和注入，使传入的 store对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。 Vuex 中修改 state 的唯一渠道就是执行 commit('xx',payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。 devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。 |
|
转播
