vue知识点

vue

Vue常见的指令有哪些，有什么用

v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建

v-show：根据表达式之真假值，切换元素的 display CSS 属性。

v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。

v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。

v-model：实现表单输入和应用状态之间的双向绑定

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

双向数据绑定的原理

采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

路由的跳转和传参有哪几种方式

<router-link :to="{ name: 'home', params: { key: '1', value: '跳转' } }">路由name,params方式跳转首页</router-link>      <router-link :to="{ name: 'home', query: { key: '1', value: '跳转' } }">路由name,query方式跳转首页</router-link>           <router-link :to="{ path: '/home', params: { key: '1', value: '跳转' } }">路由path,params方式跳转首页</router-link>      <router-link :to="{ path: '/home', query: { key: '1', value: '跳转' } }">路由path,query方式跳转首页</router-link>

注意事项!!!!!!!!!!!!: query 传参配置的是path，而params传参配置的是name，在params中配置path无效 query在路由配置不需要设置参数，而params必须设置 query传递的参数会显示在地址栏中 params传参刷新会无效，但是query会保存传递过来的值，刷新不变 ; 接收参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

<a-button type="primary" @click="goTo">路由name方式跳转</a-button>   goTo() {     this.$router.push({ name: 'home', params: { a: '1', b: '2' } });//推荐用params传参方式     this.$router.push({ name: 'home', query: { a: '1', b: '2' } });   }   <a-button type="primary" @click="goTo">路由path方式跳转</a-button>   goTo() {     this.$router.push({ path: '/home', params: { a: '1', b: '2' } });//推荐用params传参方式     this.$router.push({ path: '/home', query: { a: '1', b: '2' } });   }

组件间的通讯方式有哪些

1、父子组件间传参：父传子：父组件通过自定义属性传递，子组件通过props接受                                   子传父：父组件自定义一个事件，子组件通过$emit绑定该事件并传参，父组件由函数的自带参数接受 2、通过插槽传参:slot 3、全局事件总线eventBus：对于比较小型的项目大多使用$bus,传递参数的组件通过bus.$emit('事件名'，参数)传参，接收参数的组件通过Bus.$on('事件名', 参数 => {})接收 4、通过Vuex传参，使用state保存全局的数据，使用Getters、Mutations、Actions进行数据的处理和交流                                    首先在Mutations或者Actions定义一个函数，再通过this.$store.commit('函数名'，参数)对全局进行传参或修改 5、通过localStorage、sessionStorage参数

路由守卫的理解

路由守卫是路由在跳转前、后过程中的一些钩子函数，这些函数可以让你操作一些其他的事，在后台管理中设置权限时经常看到，在实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被执行其他操作，如返回首页。

全局守卫：所有的路由切换都会执行，一般写在路由配置文件中 router.beforeEach((to, from,next) => {   console.log(to)--到哪个页面去   console.log(from)--从哪个页面来   console.log(next)--一个回调函数 } router.afterEach(to, from){}; router.beforeResolve(to, from,next){}

组件间的路由：跟methods: {}等同级别书写  beforeRouteEnter (to, from, next) {   在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例  next(vm => {})}  beforeRouteUpdate (to, from, next) {} --同一页面，刷新不同数据时调用  beforeRouteLeave (to, from, next) {} --离开当前路由页面时调用

路由独享：在对应的router的index.js中加入  beforeEnter: (to, from, next) => {}

Vuex的理解

Vuex ：是一种专门为 Vue.js 设计的状态管理库 Vuex有五个核心方法：state, getters, mutations, actions, modules。

使用vuex的好处：可以进行统一的状态管理，解决不同组件共享数据的问题、解决了不同视图需要变更同一状态的问题、使用vuex之后，状态变化更加清晰。

state：vuex的基本数据，用来存储变量，在vue中使用：this.$store.state.属性名；

getters：相当于state的计算属性,具有返回值的方法，在vue中使用：this.$store.getters.方法名

mutations：提交更新数据的方法，每个mutations中的函数都有两个参数，state和prop，分别对应全局的参数和传入的参数；在vue中使用：this.$store.commit(‘mutations方法名’,值)

action：和mutation的功能大致相同，不同之处在于Action 提交的是 mutations，而不是直接变更状态，而且Action可以包含异步操作，使用方式this.$store.dispatch(‘mutations方法名’,值)

modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

混入的理解

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

优点： 提高代码复用性 只需要修改一个地方就可以 缺点： 命名冲突 滥用的话后期很难维护,排查问题不方便

混入：        分为全局混入和局部混入 局部混入只可以在当前组件内部使用 全局混入可以在任何组件中进行使用。 局部混入：多个组件引入局部混入时,一个组件中改动了mixin中的数据,另一个引入了mixin的组件中的属性和方法是不会改变的。 全局混入：在任何组件中都可以使用 需要挂载在顶级对象上 import {mixins} from "./mixins"//先引入封装的混入代码文件 Vue.mixin(mixins)//将引入的文件属性方法挂载到Vue的顶级对象上不同的组件混入是互相独立的 选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 组件和混入的属性方法合并优先级： data数据冲突：mixin中的data数据和组件中的data数据冲突时,组件中的data数据会覆盖mixin中的数据； 生命周期函数：这种不算冲突,生命周期函数的名称是固定的,先执行混入里的代码再执行组件中的代码； 方法名冲突：在组件中调用该方法,调用的是组件中的方法；

插槽的理解

插槽是子组件中提供给父组件使用的一个占位符，用<slot></slot>表示。父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

默认插槽：只能有一个 如：<div id="app">        <course>免费</course>     </div> <template id="course">      <div>         <h2><slot></slot>课程</h2>      </div>    </template> 结果为：免费课程

具名插槽：给插槽取个名字，一个组件可以放多个插槽，而且可以放不同地方，父组件 填充内容时，可以根据这个名字把内容填充到对应插槽中。不影响默认插槽的使用。 如：<div id="app">      <course>         <template v-slot:header>免费</template>      </course>   </div>   <template id="course">    <div>       <h2><slot name="header"></slot>课程</h2>     </div>   </template> 结果为：免费课程

什么是跨域，如何解决

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

配置代理： devServer：{ proxy：{ ‘/course-api’：{   //代理名称 target：’https://course.myhope365.com/api’,  //后台接口域名 changeOrign：true  //是否跨域  pathRewrite：{ ‘^/course-api’：’’  //路径重写 } } //第二种写法 ‘/api’：{   //代理名称 target：’https://course.myhope365.com’,  //后台接口域名 changeOrign：true  //是否跨域 } } }

同源策略：浏览器的一个安全协议，协议主机端口要保持一致，只要有一个不一样，就是跨    域请求。 同源策略就是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制。当一个请求url的协议、域名、端口三者之间任意一个与前面页面url不同即为跨域。

解决跨域： 后台直接不做限制，放开所有请求。优点就是方便，缺点就是不安全； JSONP原理，利用script标签不受同源策略，需要后端配合； 配置代理；

封装心得

可以对请求进行统一化的管理，易于维护，同时，什么地方需要，什么地方导入就可以使用，对开发人员来说十分简便，此外，可以对请求开始前及过程中进行预处理，提高了请求的效率。

​​​​​​​