1. vue 几种常用的指令v-if v-else v-html v-for v-bind v-model v-show v-on v-text v-once 2. css 只在当前组件起作用scopedstyle scoped/style3. v-if 和 v-show 的区别前者是真正的条件渲染, 在...

1. vue 几种常用的指令

• v-if

• v-else

• v-html

• v-for

• v-bind

• v-model

• v-show

• v-on

• v-text

• v-once

2. css 只在当前组件起作用

• scoped

<style scoped>
</style>

3. v-if 和 v-show 的区别

• 前者是真正的条件渲染, 在切换过程中条件块内的监听器和子组件会被销毁和重建, 只有条件为真, 才会渲染

• 后者无论条件成不成立都会添加到页面, 只是进行简单 css 样式(display)的改变

4. $route 和 $router 区别

• $route 对象表示当前的路由信息, 包含了当前 URL 解析得到的信息, 包含当前的路径,参数,query对象

• $router 对象是全局路由的实例, 是 router 构造方法的实例, 包含 push, go, replace方法

5. vue 常用的修饰符

事件

• stop(阻止冒泡)

• sync(实现子组件修改父组件的值, 不能与表达式连用)

• prevent(阻止默认事件)

• passive(不阻止浏览器默认行为)

• native(根元素添加事件)

• self(只有点击事件源才会触发)

• capture(捕获)

• once(只触发一次)

表单

• lazy(失焦或回车触发)

• number(转数字)

• trim(去除两端空格)

键盘

• enter

• esc

• space

• up

• down

6. vue 中 key 值的作用

给每个节点一个唯一的标识, Diff算法可以正确的识别此节点, 更精确匹配目标节点

7. 如何获取 dom

通过给组件绑定 ref, 可以使用 $refs 对象获取 , 要在挂载完成后操作

8. vue 等单页面应用及其优缺点

单页面:

• 通俗一点说就是指只有一个主页面的应用, 浏览器一开始要加载所有必须的 html, js, css, 所有的页面内容都包含在这个所谓的主页面中.

多页面:

? 就是指一个应用中有多个页面, 页面跳转时是整页刷新

优点:

• 用户体验好, 速度块, 内容改变的时候不需要重新加载页面, 对服务器压力较小

• 前后端分离, 降低耦合度, 提升开发效率

• 不以页面为单位, 更多的采用组件化的思想, 代码结构和组织方式更加规范化, 便于修改和调整

缺点:

• 首次加载需要加载大量的资源, 加载时间相对较长

• 容易造成css命名冲突

• 不利于 SEO 优化, 单页页面, 数据在前端渲染, 就意味着没有SEO

• 页面导航不可用, 如果一定要用导航前进, 后退, 需要自己建立堆栈管理

9. 的作用是什么

• 使用keep-alive包裹的组件在切换时不会被销毁, 会被缓存到内存中

• 避免重新渲染消耗性能, 可以配合属性max使用

10. 分别阐述 computed 和 watch的使用场景

共同点:

? 都是希望在依赖数据发生改变的时候, 被依赖的数据根据预先定义好的函数发生自动的变化

应用场景:

• watch 擅长处理的场景: 一个数据影响多个数据

• computed 擅长处理的场景: 一个数据受多个数据影响

11. $nextTick 的使用

• 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 进行操作

12. assets 和 static 的区别

• 二者都是用来存放静态资源文件
• 放在 static 中的文件不会进行构建编译处理, 也就不会压缩体积, 在打包时效率会更高, 但体积更大的在服务器中就会占据更大的空间
• 放在 assets 中的文件会进行体积压缩, 代码格式化, 压缩后放在 static 中一同上传到服务器

建议样式放在 assets 中进行打包, 引入的第三方文件放到 static 中, 因为引入的文件阴茎做过打包处理

13. vue 和 jQuery 的区别

• JQuery 是一个快速, 简介的javascript框架
• Vue 是一套用于构建用户界面的渐进式JavaScript框架

区别:

• jQuery 是通过获取DOM对象, 然后对DOM对象进行操作
• Vue 是通过Vue对象将数据和View完全分离开来了对数据进行操作不再需要引用相应的DOM对象

14. 请说出封装 vue 组件的过程

首先使用Vue.extend()创建组件

接着用Vue.component()注册组件

然后如果子组件需要数据, 可以在props中接受定义

最后子组件修改好数据后可以使用emit()方法传递给父组件

Vue.extend()创建组件:

var myCom = Vue.extend({
    template: '<div>这是我的组件</div>'
})

全局注册:

<template id="myCom">
	<div>myCom 组件</div>
</template>

Vue.component('myCOm',myCom)// 注册上面创建的组件

全局注册语法糖: 不需要创建直接注册

Vue.component('myCom',{
	template:`
		<div>myCom 组件</div>
	`
})

使用template和script标签:

<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>

Vue.component('my-com',{
    template: '#myCom'
})

局部注册:

var app = new Vue({
    el: '#app',
    components: {
        'my-com': myCom
    }
})

语法糖:

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '<div>这是我的组件</div>'
        }
    }
})

使用template和script标签:

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '#myCom'
        }
    }
})

15. params 和 query 的区别

• 使用params 传参只能使用name进行引入, 且params是路由的一部分, 必须在路由后面添加参数名, 如果在跳转时没有传递这个参数, 回到是跳转失败或者页面会没有内容
• 使用query 传参则name, path都可以使用, query时拼接在url后面的参数, 没有参数名也没关系

16. vue 更新数组时触发视图更新的方法

操作对象或数组

• Vue.set(target, key, value)
• Vue.delete(target, key)

变异方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

以下方法不会更改原数组: 返回的时新数组, 可以用新数组替换原来的数组

• filter()
• concat()
• slice()

17. vue 常用的 UI 组件库

• Vuetify

  https://vuetifyjs.com/zh-Hans/ 中文

  https://vuetifyjs.com/en/

• Element UI

• Bootstrap-Vue

• Vue-strap

18. vue-router 实现路由懒加载(动态加载路由)

• const Foo= () => import('./Foo.vue') // 按需加载
  

• const Foo = () => Promise.resolve(['@/components/Foo'],resolve)// 异部组件
  

19. 介绍 Vue 的生命周期每个函数

• beforeCreate(){} 创建之前

data ----- undefind
method --- undefind
$el ------ undefind

• created(){} 创建完成 (如果需要用请求到的数据渲染页面, 可以在此处发请求)

data ----- 数据观测(data observer) // 尽量不要在此处操作data
method --- 可用
$el ------ undefind

• beforeMount(){} 挂载之前 (这一步把正在内存中渲染好的模板结构替换到页面上)

data ----- 数据观测(data observer)
method --- 可用
$el ------ undefind

• mounted(){} 挂载完成 (组件创建阶段最后的一个生命周期函数)

data ----- 数据观测(data observer)
method --- 可用
$el ------ 创建完成 // 如果使用到一些第三方的UI插件, 而且这个插件还需要被初始化, 那么, 必须在mounted中来初始化插件

• beforeUpdate(){} 更新之前

正在根据最新的data数据，重新渲染内存中的的模板结构；并把渲染好的模板结构替换到页面上,可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程

• updated(){} 更新之后

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作

• beforeDestroy(){} 销毁之前

实例销毁之前调用, 组件即将被销毁, 但是还没有真正开始销毁, 在这里, 实例仍然完全可用, data、methods等数据或方法，依旧可以被正常访问

• destroyed(){} 销毁完成

vue 实例销毁后调用, Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子组件也会被销毁, data和methods都不可使用

• activated(){} 如果页面有 keep-alive 缓存功能, 这个函数会触发

当我们运用了组件缓存时, 如果想每次切换都发送一次请求的话, 需要把请求函数写在activated中, 写在created或mounted中其只会在首次加载该组件的时候起作用
在服务器端渲染期间不被调用, 就是在挂载后和更新前被调用