1.方法和计算属性和侦听器区别
面试点 : 侦听器和计算属性区别 (1)计算属性有缓存机制,侦听器没有 (2)计算属性不支持异步操作, 侦听器支持异步操作 (3)计算属性是一个额外新增的属性, 侦听器只能侦听data中的属性 (4)计算属性有返回值return,侦听器不需要return (5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了,就会执行计算属性方法), 侦听器只能侦听一个数据的变化。
-
方法
-
需要主动调用触发
-
不会缓存
-
-
计算属性
-
监听多个属性:只要计算属性内部数据变化就会触发
-
有缓存机制(必须要说的)
-
-
侦听器
-
监听一个属性
-
watch支持异步
-
2.请说下封装 vue 组件的过程
-
1.先分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能
-
找出业务需求中存在复用的地方
-
-
2.具体步骤:Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值,子组件修改好数据后,想把数据传递给父组件。可以采用$emit方法
3.vue组件传值
(1)父传子
1. 子组件props定义变量
2. 父组件在使用子组件时通过行内属性给props变量传值
特点:单向数据流
(2)
1.子组件:$emit触发的父事件
2.父在使用组件用@自定义事件名=父的方法(子把值带出来用)
特点:事件监听
(3)非父子组件
vuex
4.Vue 组件 data 为什么必须是函数
因为组件是需要在多个地方使用的
如果data是一个对象,对象是引用类型。 一旦某一个地方修改,就会全部修改data是一个函数,每一次复用组件的时候就会从这个函数返回一个新的对象。 这样组件在复用的时候就可以做到数据互不干扰。
5.scoped作用与原理
作用:组件css作用域,避免子组件
内部的css样式被父组件
覆盖
默认情况下,如果子组件和父组件css选择器权重相同,优先加载父组件css样式
原理:给元素添加一个自定义属性 v-data-xxxxx
6.第一次加载页面会触发哪几个钩子函数?
-
四个钩子
-
beforeCreate,
-
created,
-
beforeMount,
-
mounted 这几个钩子函数
-
7.vue路由作用与原理
-
路由作用: 实现单页面应用
-
原理:监听location的hash值
8.路由之间是怎么跳转的?有哪些方式
1. <router-link to="需要跳转到页面的路径">
2. this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回到上一个页面
3. this.$router.replace()跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面
4. this.$touter.go(n)向前或者后跳转n个页面,n可以是正数也可以是负数
9.vue-router怎么配置路由(路由配置六个流程)
1.引入组件
2.配置路由path和组件, 和生成路由对象routes
3.创建路由对象router
4.把路由对象挂载到new Vue()
5.页面使用<router-view></router-view> 承载路由
6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)
10.$route和$router的区别?
routes : 数组。 路由匹配规则
router : 对象。 路由对象
$router : 对象。 用于跳转路由 和 传递参数
$route :对象。 用于接收路由跳转参数