vue进阶题库

最新推荐文章于 2024-05-24 22:35:01 发布

pig-weiwei

最新推荐文章于 2024-05-24 22:35:01 发布

阅读量1.3k

点赞数

分类专栏： vue 前端文章标签： vue js

本文链接：https://blog.csdn.net/qq_31404277/article/details/105557766

版权

vue 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端

17 篇文章 0 订阅

订阅专栏

1，控制台会有打印么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="addA">addA</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                a:1,
                b:2
            }
        },
        computed :{
            total(){
                console.log(this.a + this.b);
                return this.a+this.b
            }
        },
        methods:{
            addA(){
                this.a++
            }
        }
    })
</script>
</html>

答：不会有打印
原因：computed叫计算属性，computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，好处就不用多说了，计算的值缓存，在更新时才调用，不会浪费计算资源。那么在上那边的问题中，我发现这个a是变化过的，按照computed定义，total中的a是发生了变化，那么total也是应该发生变化的。后来我发现total实际上是没有应用在页面上的，也就是没有被调用，那么实际上没有被调用的total，里面的所有打印或者返回都是失效的，这个和调用方法差不多。

2，控制台打印顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="addA">addA</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                a:1,
            }
        },
        methods:{
            addA(){
                this.a = 2;
                console.log('aaa')
            }
        },
        watch:{
            a(){
                console.log('bbb')
            }
        }

    })
</script>
</html>

答：打印顺序 aaa bbb
原因：watch是vue中用来监听数值变化的，或者是对象的null和非null，执行顺序也是先执行操作（先变化）再监听（执行监听的函数）。

watch:{
            a(a1,b1){
                console.log('bbb' + a1 + b1)
            }
        }

上述代码中a1代表变化之后的值，b1代表变化之前的值。并且这个值只会是第一个变化的值。
watch还有两个特性，handler方法和immediate属性，

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

immediate代表的是立即，设置为true的时候，会立即执行该方法。

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

deep能够深入对象内部，监听对象内值的变化。

3，在beforeRouteEnter钩子函数中进行console.log(this)

路由守卫钩子函数，一共有三个 beforeRouteEnter，beforeRouteUpdate ，beforeRouteLeave。
详解：如下

beforeRouteEnter(to, from, next) {
    console.log(this, 'beforeRouteEnter'); // undefined
    console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
    console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
    console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
    next(vm => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm);//当前组件的实例
    });
  },
  beforeRouteUpdate(to, from, next) {
    //在当前路由改变，但是该组件被复用时调用
    //对于一个带有动态参数的路径 /good/:id，在 /good/1 和 /good/2 之间跳转的时候，
    // 由于会渲染同样的good组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log(this, 'beforeRouteUpdate'); //当前组件实例
    console.log(to, '组件独享守卫beforeRouteUpdate第一个参数');
    console.log(from, '组件独享守beforeRouteUpdate卫第二个参数');
    console.log(next, '组件独享守beforeRouteUpdate卫第三个参数');
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(this, 'beforeRouteLeave'); //当前组件实例
    console.log(to, '组件独享守卫beforeRouteLeave第一个参数');
    console.log(from, '组件独享守卫beforeRouteLeave第二个参数');
    console.log(next, '组件独享守卫beforeRouteLeave第三个参数');
    next();
  }

4，用于监听 DOM 事件的指令是

答：v-on

5，vue-router有哪几种导航钩子

一，全局导航钩子
全局导航钩子一般在src下的index中，用于限制路由跳转，还有就是二（多）级页面组件隐藏。

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('token');
    if (!role && to.path !== '/login') {
        next('/login');
    } else if (to.meta.permission) {
        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
        role ? next() : next('/403');
    } else {
        // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
        if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
            Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
                confirmButtonText: '确定'
            });
        } else {
            next();
        }
    }
})

包含两种，一种是beforeEach一种是afterEach。
二，单独路由独享钩子
单独路由独享钩子一般放置在router文件夹下的index.js中。

{
    path: '/home',
    name: 'home',
    component: Home,
    beforeEnter(to, from, next) {
        if (window.localStorage.getItem("id")) {
            next()
        } else {
            next({ name: "login" })
        }
    }
}

三，组件内的钩子
组件钩子一般用于单页面的特殊需求，

beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
    // do someting
    // 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
    // do someting
    // 导航离开该组件的对应路由时被调用
}

6，vue路由跳转方式

一，标签跳转 router-link 在document实际表现为a标签

<li >
  <router-link :to="user">点击验证动画效果 </router-link>   
</li>

user可以在computed和data中定义，一般使用router-link几率比较低，如果使用也是动态路径
二，在script定义方法，使用this.$router.push()
这种方法在项目和实际的运用中都是非常常见的。
①

this.$router.push('/home')

②

this.$router.push({path:'/home'})

③
这是比较常见和实用的，带参数路由跳转，query 传参，相当于get请求，页面跳转时参数会在地址栏中显示，通过this.$route.query.id获取

this.$router.push({ 
    path:'/user',
    query:{
        id:this.id
    }
})

④params 传参，相当于post请求,通过this.$route.params.id获取，刷新时参数会消失

this.$router.push({ 
    path:'/user',
    params:{
        id:this.id
    }
})

以上两种方法同样可以使用name

this.$router.push({ 
    name:'user',
    params:{
        id:this.id
    }
})

三，同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

this.$router.replace{path:'/user'}

四，相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。

this.$router.go(n)

n为正向前跳转，为负向后跳转

五，

this.$router.forward() 前进一步
this.$router.back() 回退一步

7，

在这里插入图片描述

pig-weiwei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue进阶题库

1，控制台会有打印么？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> ...
复制链接

扫一扫