vue基础题

Vue2和Vue3的双向数据绑定的原理

Vue2的核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持
Vue3的核心是使用new Proxy(对象，{get(),set()})方法来给对象的属性添加get/set方法实现的！

1.vue组件引用方式，插件引用方式

2.vue为什么在v-for中的键不推荐使用随机数或者索引呢？那要怎么使用才比较好呢？**

key的作用主要是为了高效地更新虚拟DOM，使用key来给每一个例程做一个唯一的标识；差异算法可以正确的识别此后的解码器，找到正确的位置进行异步进行操作；
在绑定键的时候，最好是一个唯一的值，如item.id而不能是简单的index；在插入数据或删除数据的时候，会导致后面的数据的键绑定的索引变化，长靴导致重新渲染，效率会降低；

3.怎么给vue定义全局的方法？**

第一种：挂载到Vue的prototype上。把全局方法写到一个文件里面，然后for循环挂载到Vue的prototype上，缺点是调用这个方法的时候没有提示

Object.keys(tools).forEach(key => {
   Vue.prototype[key] = tools[key]
})
 

第二种：利用全局混入mixin，因为mixin里面的methods会和创建的每个单文件组件合并。这样做的优点是调用这个方法的时候有提示

Vue.mixin(mixin)
new Vue({
    store,
    router,
    render: h => h(App),
}).$mount('#app')
 

import tools from "./tools"
import filters from "./filters"
import Config from '../config'
import CONSTANT from './const_var'
 
export default {
    data() {
        return {
            CONFIG: Config,
            CONSTANT: CONSTANT
        }
    },
    methods: {
        // //将tools里面的方法挂载到vue上,以方便调用，直接this.$xxx方法名就可以了
        // Object.keys(tools).forEach(key => {
        //     Vue.prototype[key] = tools[key]
        // })
        //将tools里面的方法用对象展开符混入到mixin上,以方便调用，直接this.$xxx方法名就可以了
        ...tools
    },
    filters: {
        // //将filter里面的方法添加了vue的筛选器上
        // Object.keys(filters).forEach(key => {
        //     Vue.filter(key, filters[key])
        // })
        ...filters
    }
}
 

4.跟keep-alive有关的生命周期是哪些？描述下这些生命周期 ？**

1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

5.v-once的使用场景有什么？**

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子例程将被视为静态内容并跳过。这可以用于优化更新性能。
单次触发的场景 ：表单提交。可防止用户在请求未及时响应时，多次提交〜

6.怎么访问到子组件的实例或子元素？**

this.$children / this.$refs.xxx
 

7.vue组件里的定时器要怎么销毁？**

const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
 

8.vue组件会在什么时候下被销毁？**

页面关闭，路由重定向，v-if和更改键值

9.组件中写name选项有什么作用？**

项目使用keep-alive时，可搭配组件name进行缓存过滤
DOM做递归组件时需要调用自身name
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

10.prop验证的type类型有哪几种？**

type 可以是下列原生构造函数中的一个：
8种：字符串，数字，布尔值，数组，对象，日期，函数，符号，自定义构造函数
String、Number、Boolean、Array、Object、Date、Function、Symbol

11.prop是怎么做验证的？可以设置默认值吗？**

单个类型就用Number等基础类型，多个类型用数组，必填的话设置require为true，默认值的话设置default，对象和数组设置默认用工厂函数，自定义验证函数validator。

12.说说你对单向数据流和双向数据流的理解**

单向数据流：所有状态的改变可记录，可跟踪，源头易转换；所有数据只有一个，组件数据只有唯一的入口和出口，从而使程序更直观更容易理解，有利于应用的可维护性；一旦数据变化，就去更新页面（data-页面），但是没有（页面-data）；如果用户在页面上做了变动，那么就手动收集起来（双向是自动），合并到内置的数据中。
双向数据流：无论数据改变，或是用户操作，都能带来互相的移位，自动更新。
模仿就是：父传子的props就是单向数据流，v-model就是双向数据流

13.写出你知道的表单修饰符和事件修饰符**

事件修饰符.stop .prevent .capture .self .once .passive
表单修饰符.number .lazy .trim

// 表单修饰符
.lazy - 我们输入完所有东西，光标离开才更新视图
.trim - 过滤首尾空格
.number - 自动将用户的输入值转为数值类型，如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number
 
// 事件修饰符 （尽管我们可以在方法中轻松实现相关处理，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。）
.stop - 调用 event.stopPropagation(), 阻止事件冒泡(不触发父级事件)。
.prevent - 调用 event.preventDefault(), 阻止默认行为，比如点击链接会进行跳转；填写表单时按回车会自动提交到服务器；点击鼠标右键会呼出浏览器右键菜单。
.capture - 添加事件侦听器时使用 capture 模式。事件触发从包含这个元素的顶层开始往下触发，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。完整的事件机制是：捕获阶段--目标阶段--冒泡阶段
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。把一个vue组件转化为一个普通的HTML标签。
.once - 只触发一次回调。
.passive - { passive: true } 模式添加侦听器。当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。
 
// 鼠标按键修饰符
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
 
// 键值修饰符
.keyCode - 只当事件是从特定键触发时才触发回调。
.exact - 只需要或者只能按一个系统修饰键来触发。
 
// 其他修饰符
.sync - 父子组件进行双向数据绑定，会扩展成一个更新父组件绑定值的 v-on 侦听器。
.camel - HTML 特性是不区分大小写的，该修饰符使属性被渲染为驼峰名
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
 

vue怎么获取DOM节点？**

1、document.getElementById("id")
2、this.$refs.xx

vue生命周期总共有几个阶段？**

    beforeCreate：在 new 一个 vue 实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。
    created：data 和 methods 都已经被初始化好了。（如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作）
    beforeMount：在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。
    mounted：Vue 实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 （如果我们想要通过插件操作页面上的 DOM 节点，最早可以在和这个阶段中进行）
    beforeUpdate：页面中的显示的数据还是旧的，data 中的数据是更新后的， 页面还没有和最新的数据保持同步。
    updated：页面显示的数据和 data 中的数据已经保持同步了，都是最新的。
    beforeDestroy：Vue 实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁。
    destroyed：这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
 

组件和插件有什么区别？

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

删除数组用delete和Vue.delete有什么区别？**

delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变
Vue.delete：直接删了数组成员，并改变了数组的键值（对象是响应式的，确保删除能触发更新视图，这个方法主要用于避开 Vue 不能检测到属性被删除的限制）

watch怎么深度监听对象变化**

immediate设置为true就可以监听开始之后立即被调用
deep设置为true 就可以监听到对象的变化

   let vm=new Vue({
       el:"#first",
       data:{msg:{name:'北京'}},
       watch:{
 
           msg:{
               handler (newMsg,oldMsg){
                   console.log(newMsg);
               },
               immediate:true,
               deep:true
           }
       }
   })
 

watch和computed有什么区别？

1.一个是侦听属性，一个是计算属性
2.一个是为了应对复杂的逻辑计算，一个是对数据的变化作出反应
3.一个是只有当缓存改变时才执行，一个是只要从新渲染就会执行
4.一个有缓存，一个没有缓存
watch可以深度监听复杂对象的变化；
computed只能监听简单简单对象的变化
能不用watch就不用watch, watch一般用在你要监听的属性与你要使用的属性没有太多关联的时候，一般在异步时使用

vue组件之间的通信都有哪些？

父子
    props
    $emit/$on
    ( $parents/$children ) / $refs
兄弟
    Vuex
    Bus
跨级
   Vuex
    Bus
    ( provide/inject )
    ( $attrs/$listeners )
 

在vue组件中怎么获取到当前的路由信息？

this.$route.path 或者 this.$router
 

route和router有什么区别？
route：代表当前路由信息对象，可以获取到当前路由的信息参数
router：代表路由实例的对象，包含了路由的跳转方法，钩子函数等
vue-router钩子函数有哪些？都有哪些参数？

1.全局：
前置守卫：beforeEach((to, from, next)=>{
to：即将进入的路由对象
form：当前导航正要离开的路由
next()：进行管道中的下一个钩子
})
解析守卫：beforeResolve((to, from, next)=>{})
后置钩子：afterEach((to,form)=>{})
 
路由：beforeEnter((to, from, next)=>{})
 
组件：
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 this
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}
 

有用过vuex吗？它主要解决的是什么问题？推荐在哪些场景用？
多个视图依赖同一个状态
来自不同视图的行为需要变更同一状态
适用于中大型的单页面应用
我主要还是当全局变量来用的，比如登录人信息、token、浏览记录、跨组件的较大临时数据传递。
以往需要调个方法取全局变量或缓存，其实反而增加了初始化流程，而会自动更新的 vuex 就很好用了。
vuex的store有几个属性值？分别讲讲它们的作用是什么？
state:存贮公共数据的地方
Getters：获取公共数据的地方,获取根据业务场景处理返回的数据
mutations：放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行;唯一修改state的方法，修改过程是同步的
action：放的是异步的操作 通过分发操作触发mutation
context是store的一个副本
module 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
Vuex就是提供一个仓库，store仓库里面放了很多对象其中state即使数据源存放地，
vuex中actions和mutations有什么区别？
actions：主要用来处理异步，提交的是mutations，在组件中用dispatch()派发
mutations：用来直接修改state的在组件中用this.$store.commit()触发
其两个都可以用辅助函数mapActions

作者：lucky婧
链接：https://www.jianshu.com/p/6e52005e7d6d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。