vue進階題庫

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() 回退一步

HTML頁面關於高分屏的設置

北歐瑞典挪威芬蘭瑞士TikTok海外網紅與YouTube博主的合作模式

歐洲英國德國法國TikTok與YouTube海外網紅達人的完美合作策略

druid數據源 xml配置

vue的axios攜帶token下載文件

css中~ + > 空格意義

git相關操作指令

vue中tools工具js如何使用

session的存儲與調用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結