牛客Vue模块练习-Day1

1.vue-router中可以进行重定向，使用redirect进行重定向。如  {path:"/",redirect:"/home"} 将页面重定向到 home页面

2.使用脚手架创建项目时，需要安装vue-router

3.keep-alive：缓存子组件，被包裹的子组件会多出两个生命周期：activated、deactivated。当组件在keep-alive内被切换时，它的mounted和unmounted生命周期钩子会被activated和、deactivated代替。

4.$nextTick是什么、如何用、原理是什么?

①了解一个前提，vue更新DOM时是异步更新的。简单说就是，有一个队列，里面都是等着更新的数据，数据都变完了，DOM再跟新。就是异步更新。需要使用$nextTick()原因是Vue是异步渲染

②使用场景：如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()、在created等虚拟DOM没有完成挂载的钩子函数中，避免操作DOM报错可以把操作语句放在$nextTick的回调函数中

③原理：简单理解就是一个setTimeout函数。

5.$nextTick()返回一个Promise对象

6.获取动态路由{ path: '/name/:id' }中id的值正确的代码是 this.$route.params.id

router其实是VueRouter的一个实例，所以它是一个全局对象，包含了所有的子对象和属性

而route是正在跳转的这个路由的局部对象，可以获取这个正在跳转的路由的name，path，params，query等

7.Vuex可以实现任何关系的组件间的通信

8.context是用在react中进行组件间的传值，Vue组件间传值可以通过props，$emit,Vuex。

9.现有以下代码，下面说法错误的是（  D ）

<div v-show='flag'>使用v-show控制</div>

<div v-if='flag'>使用v-if控制</div>

A.当flag是true时，两个div都能显示出来

B.当flag是false时，第一个div进行了渲染

C.当flag是false时，第一个div设置了display: none

D.当flag是false时，第二个div设置了visible: hidden

解释：

v-show和v-if都是在true的时候才会展示。因此A对。

v-show是无论结果为false还是true都会进行渲染，而v-if只有结果为true的时候才会进行渲染。

v-show的本质就是通过设置display属性去控制展示，而v-if则会涉及对应模版/事件的挂载和卸载。因此C对，D错。

10.Vue的生命周期的钩子函数中mounted和beforeDestroy中都可以获取到DOM元素

11.由于Vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象

12.v-model添加number修饰符,可以自动将用户的输入值转为数值类型

13.可以给v-model添加trim修饰符,自动过滤用户输入的首尾空白字符

14.v-model添加number修饰符,如果这个值无法被parseFloat()解析，则会返回原始的值。

15.Vue路由的跳转方式有route-link、this.$router.push()、this.$router.replace()、this.$router.go()等，但是没有this.$router.jump()

16.bind函数只调用一次，指令第一次绑定到元素时调用

17.自定义指令钩子函数参数"el"指所绑定的元素，可以直接操作DOM元素。如修改绑定元素的字体颜色：el.style.color = 'red'

18.Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。

19.getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

20.更改Vuex的store中的状态的唯一方法是提交mutations中的方法

21.Actions可以包含任意异步操作，提交的是mutations中的方法，而不是直接变更状态。

22.React中组件的this并不是当前实例，默认指向是windon，要通过bind或箭头函数来修改指向。

23.mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。

打印结果为'first'。

打印结果为'first' 'second'。

24.阅读以下代码，请选择可以正确打印h1标签宽度的选项（ABC   ）

A.this.$nextTick(function() {console.log(this.$refs.h1.offsetWidth)})

B.setInterval(() => {console.log(this.$refs.h1.offsetWidth)})

C.setTimeout(() => {console.log(this.$refs.h1.offsetWidth)})

D.console.log(this.$refs.h1.offsetWidth)

解释：Vue实现响应式并不是数据发生变化之后DOM立即变化，而是在同步任务执行完成之后才执行渲染任务，简单说Vue的渲染是异步的。