VUE面试笔记

无痕刷新

在父组件中给引用的标签加v-if并绑定变量，并使用provide向子组件中传递该变量，子组件中使用inject进行接收。

<template>
    <div id='app'>
        <router-view v-if="isShow"></router-view>
    </div>
</template>
<script>
export default{
    name: "App",
    provide() {
        return{
            reload: this.pageReload
        }
    },
    data(){
        return{
            isShow:true;
        }
    },
    methods:{
        pageReload(){
            this.isShow = false;
            this.$nextTick(() => {
                this.isShow = true;
            })
        }
    }
}
</script>

<template>
    <div id="child">
        <button @click="pageReload()">
            Show||hidden
        </button>
    </div>
</template>
<script>
export default{
    name: "child",
    inject: ["reload"],
    methods:{
        pageReload(){
            this.reload();
        }
    }
}
</script>

Vue中的data用return返回

因为不使用return包裹的数据会在项目全局可见，导致变量污染。而使用return包裹的·变量只有当前组件生效，不会影响其他组件。

Vue兼容IE浏览器

下载babel-polyfill插件，因为ie不支持promise属性。

npm install babel-polyfill --save-dev

main.js中引入babel-polyfill插件。

import 'babel-polyfill'

webpack.base.config.js中将entry(入口)配置app:'./src/main.js'改为app:['babel-polyfill','./src/main.js']

判断是否为IE11以下的浏览器

使用document.all属性

if(document.all){
    console.log('is IE!')
}else{
    console.log('is IE11 or not IE')    //IE11不存在该属性
}

methods与computed以及watch的区别

watch一般用于数据的一对多（浏览器自适应宽度），computed一般用于数据的多对一（总价计算，作为过滤器）。

apply、call、bind区别

apply和call都是当场执行，而bind则是返回一个新的函数，新函数被调用时才执行。

apply传递数组，call传递的是一个个变量。

向VUE中的响应式对象中添加一个属性，删除一个属性

Vue.set(对象名，对象键|数组下标，属性)；
Vue.delete(对象名，对象键|数组下标)；

VUE自定义指令

Vue.directive('指令名',{
    bind(){
        //生命周期，只在指令绑定到元素上时触发一次
    },
    inserted(){
        //生命周期，当绑定的元素插入到父元素上时触发，但不保证父元素是否已经插入到DOM中
    },
    update(){
        //生命周期，
    }
})

VUE路由传参方式

1、地址栏后拼参数

定义路由：
    {
        path: "/page/:id",
        name: "Page",
        component: Page,
    }
跳转：
    this.$router.push("/page/123")
获取参数：
    this.$route.params.id

2、query传参

定义路由：
    {
        path: "/page",
        name: "Page",
        component: Page,
    }
跳转：
    this.$router.push({
        path: "/page",
        query:{
            id: 1
        }
    })
获取参数：
    this.$route.query.id

3、params传参

定义路由：
    {
        path: "/page",
        name: "page",
        component: Page
    }
跳转：
    this.$router.push({
        name: "page",       //只能通过name进行跳转，使用path跳转会导致获取不到参数
        params:{
            id: 1
        }
    })
获取参数：
    this.$route.params.id

回流与重绘

回流必定重绘，重绘不一定回流

回流：页面元素的几何发生改变时会引起回流（边距，填充，边框，宽度，高度，显示隐藏，dom的添加删除，）

重绘：只影响元素外观（background-color）

Content-Type

application/json => json 格式
application/x-www-form-urlencoded => 键值对格式
Content-Type: multipart/form-data => 一般用于上传文件

最后编辑于：2020.08.20 09:59:11