每天vue一下

简介: 每天vue一下

1.描述在项目中使用vuerouter的流程?



创建一个对象,通过path和component属性配置URL路径和组件的对应关系。

通过这个配置对象创建路由页面中添加router-view组件显示匹配到的组件页面中使用router-link组件制作路由跳转的按钮在JS中可以使用this.$router.push方法实现路由页面的跳转


2.vue中如何获取dom和组件



在<标签ref="domName">或<组件名ref="domName">上加ref属性

js中通过this.$refs.domName


3.route和router的区别是什么?



route存储的是属性比如route.query,route.params

router存储的是方法比如router.push,router.replace,router.go


4.params和query的区别?



1.用法上query要用path来引入,params需要name来引入,接收参数都是类似的,分

别是this.route.query.name和this.route.params.name

2.展示上的query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,

前者在浏览器地址栏中显示参数,后者则不显示

3.params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关


5.路由导航守卫有几种?



全局守卫、组件内守卫和路由独享守卫。


6.keep-alive的作用是什么?



一个路由在切换时会被销毁,之前的数据全部丢失,下次再访问这个组件时,需

要重新创建,重新调接口,重新渲染,为了提高性能我们可以使用keep-alive

把组件缓存起来,这样在组件切换时,这个组件并没有被销毁,下次访问时,就

可以显示出来,而且原组件中数据还在。


7.路由导航守卫的参数有几种?参数的作用?



to:对象,将要跳转到的路由对象。

from:对象,跳转前的路由对象。

next:函数,控制是否跳转


8.axios如何配置基地址?



写法一、直接在axios上设置axios.defaults.baseURL

// 配置头部
axios.defaults.baseURL = "http://localhost:8888/";


写法二、在创建时使用baseURL属性:create

// 创建Axios
const Ser = axios.create({
    // axios中请求配置有baseURL选项,表示请求URL公共部分
    baseURL: "地址",
    // 超时设置
    timeout: 50000
})


9.created和mounted的区别



created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom

节点进行一些需要的操作。


10.在Vue中使用一个自定义组件的流程是



自定义组件有两种情况:

全局组件:

在创建实例之前通过Vue.component定义全局组件

在任何一个组件的模板中直接使用

局部组件

创建一个自定义组件

在组件中使用时需要先使用import引入这个自定义组件

引入之后需要在components属性中注册这个组件

注册之后就可以在模板中使用


11.父传子组件通信?



1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量

2.在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用的数据可以直接使用


12.父传子中props属性验证的数据类型有哪些?



字符串 布尔 数值 数组 对象 函数


13.子传父组件通信的流程?



子传父:主要通过$emit来实现

具体实现:子组件通过绑定事件触发函数,在其中设置this.$emit

中有两个参数一是要派发的自定义事件,第二个参数是要传递的值


14.兄弟组件通信的流程?



兄弟之间传值有两种方法:

方法一

创建一个空的vue并暴露出去,这个作为公共的bus,即当作两个组件的桥梁

在两个兄弟组件中分别引入刚才创建的bus

在组件A中通过bus.emit发送数据

在组建B中通过bus.on接收数据

方法二通过vuex实现


15.什么是插槽?插槽有哪些?



插槽是用来向一个组件中传入另一个组件或者一段HTML结构用的

插槽分为三种:

匿名插槽:没有设置名称的插槽,一个组件中只能有一个匿名插槽

有名插槽:通过name属性设置了名字的插槽

作用域插槽


16.vm.$nextTick是用来干什么的?



通过this.$nextTick我们可以注册一个回调函数,这个回调函数会在下次DOM更新结束之后执行。

vue的数据是采用延迟异步更新的,就是说当我们修改了数据之后,页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话,获取的还是之前旧的数据,这个时候我们就可以使用$nextTick方法


17.vue中是如何绑定事件?



在vue中使用v-on指令来绑定一个事件,事件可以是methods中定义的方法,也可以使用@来进行简写


18.data为什么是一个方法而不是一个对象?



对象的特性是浅拷贝的数据相互引用都是会改变对象的内容,数据会混乱Vue中的data是一个对象类型,对象类型的数据是按引用传值的。这就会导致所有组件的实例都共享同一份数据,这是不对的,我们要的是每个组件实例都是独立的所以为了解决对象类型数据共享的问题,我们需要将data定义成一个函数,每个实例需要通过调用函数生成一个独立的数据对象


19.什么是计算属性?和监听器有什么区别?



在Vue中使用computed来定义计算属性,每个计算属性就是一个函数,这个函数需要有一个返回值。和监听器的区别:

计算属性主要用途:得到一个经过计算的数据

并且当依赖的数据改变时重新计算,重点在于得到数据

监听器的主要用途:当依赖改变函数时,一个函数重点在干一件事,这件事通常

比较复杂,比如:当搜索条件改变时,重新调用后端接口等

20.什么是监听器?和计算属性的区别?



在Vue中使用watch

属性来定义一个监听器函数,当依赖的数据发生变化时触发函数

与计算属性的区别:

计算属性主要用途:得到一个经过计算的数据并且当依赖的数据改变时重新计算,重点在于得到数据

监听器的主要用途:当依赖改变函数时,一个函数重点在干一件事,这件事通常比较复杂,比如:当搜索条件改变时,重新调用后端接口等

目录
相关文章
|
20天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
7天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
7天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
7天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
6天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
8天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
8天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
13天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发