vue前端面試

一 .v-if和v-show的區別

v-if 和 v-show 是 Vue.js 中兩個常用的條件渲染指令，它們都可以根據條件決定是否渲染某個元素。但是它們之間存在一些區別。

  1. 語法：v-if 和 v-show 的語法相同，都接收一個布爾值作為參數。
<div v-if="show">Hello, World!</div>
<div v-show="show">Hello, World!</div>
  1. 條件渲染：v-if 會根據條件決定是否渲染整個元素，如果條件為 false，則元素不會被渲染；v-show 會根據條件決定是否顯示元素，如果條件為 false，則元素會隱藏，但仍然存在于 DOM 中。
<div v-if="show">Hello, World!</div>
<div v-show="show">Hello, World!</div>
  1. 性能：v-if 會根據條件決定是否渲染整個元素，如果條件為 false，則元素不會被渲染，這種情況下，Vue.js 會銷毀和重建元素，性能較差；v-show 會根據條件決定是否顯示元素，如果條件為 false，則元素會隱藏，但仍然存在于 DOM 中，這種情況下，Vue.js 不會銷毀和重建元素，性能較好。

總結：v-if 和 v-show 都可以根據條件決定是否渲染某個元素，但它們之間存在一些區別。v-if 會根據條件決定是否渲染整個元素，如果條件為 false，則元素不會被渲染，這種情況下，Vue.js 會銷毀和重建元素，性能較差；v-show 會根據條件決定是否顯示元素，如果條件為 false，則元素會隱藏，但仍然存在于 DOM 中，這種情況下，Vue.js 不會銷毀和重建元素，性能較好。在實際使用中，可以根據具體需求選擇合適的指令。

二.如何理解mvvm

MVVM（Model-View-ViewModel）是一種前端開發模式，它將數據與視圖分離，從而提高代碼的可維護性和可擴展性。

在 MVVM 模式中，Model 表示數據模型，View 表示視圖，ViewModel 表示視圖模型。數據模型負責存儲數據，視圖負責展示數據，視圖模型負責將數據與視圖進行綁定。

在 MVVM 模式中，視圖模型負責將數據與視圖進行綁定。當數據模型中的數據發生變化時，視圖模型會自動更新視圖，從而實現數據與視圖的雙向綁定。

以下是一個簡單的 MVVM 示例：

<template><div><input v-model="searchText" placeholder="Search" /><p>Search text: {{ searchText }}</p></div>
</template><script>
export default {data() {return {searchText: ''};}
};
</script>

在這個示例中，searchText 是數據模型，<input> 和 <p> 是視圖，v-model 是視圖模型。當用戶在輸入框中輸入內容時，searchText 會自動更新，視圖中的內容也會自動更新。

總結：MVVM 是一種前端開發模式，它將數據與視圖分離，從而提高代碼的可維護性和可擴展性。在 MVVM 模式中，視圖模型負責將數據與視圖進行綁定，實現數據與視圖的雙向綁定。

model-view-viewmodel的縮寫，是一種設計思想。

model就是數據模型，用于定義數據修改和操作。

view是視圖。

viewmodel是連接view和model的橋梁。

當數據改變時，viewmodel通過監聽到數據變化，自動更新視圖，當用戶操作視圖時，viewmodel可以監聽視圖變化，通知數據進行改動。

viewmodel通過雙向綁定把view和model連接起來，他們之間的同步是自動的。

三.組件生命周期

Vue 組件的生命周期指的是組件從創建到銷毀的一系列過程，可以分為創建、掛載、更新、銷毀四個階段。

  1. 創建階段：在創建階段，Vue 會進行一些初始化工作，如初始化數據、事件、計算屬性等。

  2. 掛載階段：在掛載階段，Vue 會根據模板編譯生成 DOM，并將數據與 DOM 進行綁定。

  3. 更新階段：在更新階段，Vue 會根據數據的變化，更新 DOM。

  4. 銷毀階段：在銷毀階段，Vue 會進行一些清理工作，如解綁事件、計算屬性等。

以下是 Vue 組件的生命周期鉤子函數：

  1. beforeCreate：在創建階段之前調用，此時 Vue 實例尚未被創建。

  2. created：在創建階段之后調用，此時 Vue 實例已經被創建，但 DOM 尚未被編譯。

  3. beforeMount：在掛載階段之前調用，此時 DOM 尚未被編譯。

  4. mounted：在掛載階段之后調用，此時 DOM 已經被編譯，但尚未被渲染。

  5. beforeUpdate：在更新階段之前調用，此時 DOM 已經被渲染，但數據尚未被更新。

  6. updated：在更新階段之后調用，此時 DOM 已經被更新，但尚未被渲染。

  7. beforeUnmount：在銷毀階段之前調用，此時 DOM 已經被渲染，但尚未被解綁。

  8. unmounted：在銷毀階段之后調用，此時 DOM 已經被解綁，Vue 實例已被銷毀。

總結：Vue 組件的生命周期指的是組件從創建到銷毀的一系列過程，可以分為創建、掛載、更新、銷毀四個階段。在不同的生命周期階段，Vue 會調用不同的生命周期鉤子函數，我們可以通過這些鉤子函數來執行一些特定的操作。

簡言之：

  1. 創建

beforeCreate:屬性和方法都不能使用

created:實例創建完成之后，可以使用和修改數據，但頁面沒有被渲染

  1. 掛載

beforemount:虛擬dom創建完成，即將渲染

mounted:把編譯好的模板掛載到頁面

  1. 更新

beforeUpdate:組件更新之前使用，數據是新的，頁面上的數據是舊的，組件即將更新

updated:render重新渲染，數據和頁面都是新的

  1. 銷毀

beforeDestory:清除定時器等操作

destroyed:組件被銷毀

使用keep-alive時多出兩個

activited:組件激活時

deactivited:組件銷毀時

四.在created和mounted去請求數據，有什么區別

在 Vue.js 中，created 和 mounted 是兩個常用的生命周期鉤子函數，都可以用來請求數據。但是它們之間存在一些區別。

  1. 調用時間：created 鉤子函數在 Vue 實例被創建后立即調用，此時 Vue 實例的 data 和 methods 屬性已經初始化，但 DOM 尚未被編譯；mounted 鉤子函數在 DOM 被編譯后調用，此時 Vue 實例的 data 和 methods 屬性已經初始化，DOM 已經渲染。

  2. 請求數據：在 created 鉤子函數中請求數據，如果請求失敗，可能會導致 Vue 實例無法被創建；在 mounted 鉤子函數中請求數據，即使請求失敗，也不會影響 Vue 實例的創建和渲染。

  3. 頁面加載速度：在 created 鉤子函數中請求數據，可能會導致頁面加載速度變慢，因為請求數據需要時間；在 mounted 鉤子函數中請求數據，可以確保在頁面加載完成后立即請求數據，從而提高頁面加載速度。

總結：created 和 mounted 都可以用來請求數據，但它們之間存在一些區別。created 鉤子函數在 Vue 實例被創建后立即調用，此時 Vue 實例的 data 和 methods 屬性已經初始化，但 DOM 尚未被編譯；mounted 鉤子函數在 DOM 被編譯后調用，此時 Vue 實例的 data 和 methods 屬性已經初始化，DOM 已經渲染。在實際使用中，可以根據具體需求選擇合適的鉤子函數來請求數據。

created:渲染前調用，先初始化數據。

mounted:渲染后調用，請求數據可能會出現閃屏，created不會。

請求的數據對dom有影響，使用created，與dom無關，可以放在mounted。

五.vue組件通信

Vue 組件通信主要有以下幾種方式：

  1. props 和 $emit：通過 props，父組件可以將數據傳遞給子組件；通過 $emit，子組件可以將數據傳遞給父組件。
<!-- 父組件 -->
<template><div><child-component :message="parentMessage"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent'};}
};
</script>

<!-- 子組件 -->
<template><div>{{ message }}<button @click="sendMessage">Send message to parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendMessage() {this.$emit('message-sent', 'Hello from child');}}
};
</script>
  1. .sync 修飾符：在 Vue 2.3.0 版本中，引入了 .sync 修飾符，可以簡化子組件修改父組件數據的操作。
<!-- 父組件 -->
<template><div><child-component :message.sync="parentMessage"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent'};}
};
</script>

<!-- 子組件 -->
<template><div>{{ message }}<button @click="sendMessage">Send message to parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendMessage() {this.message = 'Hello from child';this.$emit('update:message', 'Hello from child');}}
};
</script>
  1. Vuex：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式與庫。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment(context) {context.commit('increment');}},modules: {count: {state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment(context) {context.commit('increment');}}}}
});
  1. $root 和 $parent：通過 $root 和 $parent，可以訪問到 Vue 實例的根節點和父節點。
<!-- 子組件 -->
<template><div>{{ rootMessage }}{{ parentMessage }}</div>
</template><script>
export default {inject: ['rootMessage', 'parentMessage'],created() {console.log(this.$root); // 訪問根節點console.log(this.$parent); // 訪問父節點}
};
</script>

總結：Vue 組件通信主要有 props 和 $emit、.sync 修飾符、Vuex、$root 和 $parent 等方式。在實際項目中，可以根據具體需求選擇合適的通信方式。

簡言之：

父傳子:props,$ref --引用信息對象會注冊在父組件$refs對象上

子傳父:$emit—子組件綁定自定義事件，子組件綁定接收

兄弟傳:全局事件總線$bus用on和emit來進行數據傳輸

六.keep-alive

keep-alive 是 Vue.js 提供的一個生命周期鉤子函數，它會在組件被銷毀后，將其緩存到內存中，當再次訪問時，會從緩存中取出組件實例，而不是重新創建一個新的實例。這樣可以減少內存的消耗，提高頁面的加載速度。

keep-alive 主要用于需要頻繁切換的頁面，如首頁、列表頁等。當用戶在兩個頁面之間頻繁切換時，使用 keep-alive 可以避免頻繁地創建和銷毀組件實例，從而提高頁面的加載速度。

要使用 keep-alive，需要遵循以下步驟：

  1. 在需要緩存的組件上添加 keep-alive 屬性。
<template><div><!-- 頁面內容 --></div>
</template><script>
export default {name: 'MyComponent',keepAlive: true
};
</script>
  1. 在 keep-alive 生命周期鉤子函數中，可以進行一些緩存數據的處理。
export default {name: 'MyComponent',keepAlive: true,mounted() {console.log('Component mounted');},destroyed() {console.log('Component destroyed');}
};

注意：keep-alive 主要用于需要頻繁切換的頁面，對于一些需要根據用戶操作進行緩存的數據，可以使用 Vuex 等狀態管理庫進行管理。

是vue的內置組件，包裹組件時，會緩存不活躍的組件實例。

防止重復渲染、減少加載時間和性能消耗。

七. axios如何封裝

Axios 是一個基于 Promise 的 HTTP 客戶端，用于在瀏覽器和 Node.js 中發起 HTTP 請求。 Axios 具有以下特點：

  1. 支持 Promise API
  2. 支持攔截器
  3. 支持請求和響應的數據處理
  4. 支持取消請求
  5. 支持自動轉換 JSON

下面是一個簡單的 Axios 封裝示例：

  1. 安裝 Axios：
npm install axios
  1. 創建 axios.js 文件，封裝 Axios：
import axios from 'axios';const instance = axios.create({// 基本 URLbaseURL: 'https://api.example.com',timeout: 5000,
});// 請求攔截器
instance.interceptors.request.use(function (config) {// 在發送請求之前做些什么return config;},function (error) {// 對請求錯誤做些什么return Promise.reject(error);}
);// 響應攔截器
instance.interceptors.response.use(function (response) {// 對響應數據做點什么return response;},function (error) {// 對響應錯誤做點什么return Promise.reject(error);}
);export default instance;
  1. 在需要使用 Axios 的地方引入封裝好的 Axios：
import axios from './axios';axios.get('/users').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

在這個示例中，我們創建了一個名為 instance 的 Axios 實例，并設置了請求攔截器和響應攔截器。然后，我們將封裝好的 Axios 實例導出，以便在其他地方使用。

注意：這個示例僅作為參考，實際項目中可能需要根據具體需求進行調整。

下載axios----創建實例----封裝請求和響應攔截器----封裝接口-----使用

八.vue路由傳參

Vue.js 中的路由傳參主要有以下幾種方式：

  1. 使用 query 參數：在路由的路徑中添加 query 參數，如 /search?keyword=xxx。在組件中，可以通過 this.$route.query 獲取 query 參數。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,props: true}
];const router = new VueRouter({routes
});export default router;

<!-- Search.vue -->
<template><div><h2>Search</h2><p>Keyword: {{ keyword }}</p></div>
</template><script>
export default {props: ['keyword']
};
</script>
  1. 使用 props：在路由的 props 屬性中定義需要傳遞的參數，如 { keyword: String }。在組件中，可以通過 this.$route.params 獲取 params 參數。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search/:keyword',name: 'Search',component: Search,props: {keyword: String}}
];const router = new VueRouter({routes
});export default router;

<!-- Search.vue -->
<template><div><h2>Search</h2><p>Keyword: {{ keyword }}</p></div>
</template><script>
export default {props: ['keyword']
};
</script>
  1. 使用 to 屬性：在路由的 to 屬性中，可以使用 { propName: propValue } 的形式傳遞參數。在組件中，可以通過 this.$route.params 獲取 params 參數。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,to: {name: 'Search',params: {keyword: 'xxx'}}}
];const router = new VueRouter({routes
});export default router;

<!-- Search.vue -->
<template><div><h2>Search</h2><p>Keyword: {{ keyword }}</p></div>
</template><script>
export default {props: ['keyword']
};
</script>

總結：Vue.js 中的路由傳參主要有使用 query 參數、使用 props 和使用 to 屬性三種方式。在實際項目中，可以根據具體需求選擇合適的傳參方式。

params傳參:this.$router.push({name:'',params:{}})

this.$route.params.id

路由屬性傳參

this.$router.push({name:'/${item.id}'})

路由配置{path:'/index:id'}

query傳參

this.$router.push({name:'index',query:{}})

九.路由hash模式和history有啥區別

路由的 hash 模式和 history 模式的主要區別在于 URL 的表現形式和瀏覽器的歷史記錄。

  1. URL 表現形式：
  • hash 模式：URL 中會帶有 # 符號，如 http://example.com/#/search。
  • history 模式：URL 中不會帶有 # 符號，如 http://example.com/search。
  1. 瀏覽器歷史記錄：
  • hash 模式：在瀏覽器中，點擊回退按鈕會返回到上一個頁面，而不是跳轉到上一個 URL。
  • history 模式：在瀏覽器中，點擊回退按鈕會跳轉到上一個 URL，而不是返回到上一個頁面。

總結：hash 模式和 history 模式的主要區別在于 URL 的表現形式和瀏覽器的歷史記錄。在實際項目中，可以根據具體需求選擇合適的路由模式。

  1. hash地址上有#，history沒有

  2. 地址欄回車刷新時，hash會加載相應頁面，history會報404

  3. hash支持低版本瀏覽器，因為H5新增的API

  4. hash不會重新加載頁面

  5. history有歷史記錄，可以通過pushState和replaceState(0)去修改歷史記錄，并不立刻發送請求

  6. history需要后臺配置

十.路由攔截

Vue.js 中的路由攔截主要通過導航守衛來實現。導航守衛是 Vue Router 提供的全局導航守衛，可以在路由導航過程中執行一些操作，如攔截導航、改變導航參數等。

Vue Router 提供了以下幾種導航守衛：

  1. beforeEach：在導航守衛中，可以在導航到新路由之前執行一些操作。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,beforeEach: (to, from, next) => {// 在這里可以執行一些操作，如驗證用戶是否登錄if (!userLoggedIn) {next({ name: 'Login' });} else {next();}}}
];const router = new VueRouter({routes
});export default router;
  1. beforeEnter：在導航守衛中，可以在導航到新路由之前執行一些操作。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,beforeEnter: (to, from, next) => {// 在這里可以執行一些操作，如驗證用戶是否登錄if (!userLoggedIn) {next({ name: 'Login' });} else {next();}}}
];const router = new VueRouter({routes
});export default router;
  1. beforeRouteEnter：在導航守衛中，可以在導航到新路由之前執行一些操作。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,beforeRouteEnter: (to, from, next) => {// 在這里可以執行一些操作，如驗證用戶是否登錄if (!userLoggedIn) {next({ name: 'Login' });} else {next();}}}
];const router = new VueRouter({routes
});export default router;
  1. beforeRouteUpdate：在導航守衛中，可以在導航到新路由之前執行一些操作。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,beforeRouteUpdate: (to, from, next) => {// 在這里可以執行一些操作，如驗證用戶是否登錄if (!userLoggedIn) {next({ name: 'Login' });} else {next();}}}
];const router = new VueRouter({routes
});export default router;
  1. beforeRouteLeave：在導航守衛中，可以在導航離開當前路由之前執行一些操作。
// router.js
import VueRouter from 'vue-router';
import Search from './components/Search.vue';const routes = [{path: '/search',name: 'Search',component: Search,beforeRouteLeave: (to, from, next) => {// 在這里可以執行一些操作，如保存當前路由信息saveCurrentRouteInfo();next();}}
];const router = new VueRouter({routes
});export default router;

總結：Vue.js 中的路由攔截主要通過導航守衛來實現。導航守衛是 Vue Router 提供的全局導航守衛，可以在路由導航過程中執行一些操作，如攔截導航、改變導航參數等。在實際項目中，可以根據具體需求使用導航守衛來實現

router.before e ach((to,from,next)=>{})

十一.vue的動態路由

在路由配置里設置meta屬性，擴展權限相關字段，在路由導航守衛里判斷這個權限標識實現動態的增加和跳轉路由

十二…如何解決刷新后二次加載路由

window.location.reload()matchercosnt router=createRouter()export function resetRouter(){const newRouter=creatRouter()router.matcher=newRouter.matcher}

十三.vuex刷新頁面數據丟失

vuex會重新獲取數據

把數據保存在瀏覽器緩存里cookie、localstorage、session

頁面刷新時，再次請求數據，動態更新vuex里面的數據

十四.computed和watch區別

computed 和 watch 是 Vue.js 中兩個重要的屬性，它們都可以實現數據的雙向綁定，但它們之間存在一些區別。

  1. 定義方式：computed 是通過 Object.defineProperty() 方法來定義的，而 watch 是通過 Vue.prototype.watch 方法來定義的。

  2. 依賴收集：computed 屬性會進行依賴收集，當依賴的數據發生變化時，會自動更新視圖；而 watch 屬性不會進行依賴收集，需要手動觸發視圖更新。

  3. 緩存：computed 屬性會緩存計算結果，當依賴數據發生變化時，會重新計算；而 watch 屬性不會緩存計算結果，每次都會重新計算。

  4. 性能：computed 屬性性能比 watch 屬性高，因為它進行了依賴收集，而 watch 屬性需要手動觸發視圖更新。

總結：computed 和 watch 都可以實現數據的雙向綁定，但它們之間存在一些區別。computed 屬性會進行依賴收集，當依賴的數據發生變化時，會自動更新視圖；而 watch 屬性不會進行依賴收集，需要手動觸發視圖更新。computed 屬性會緩存計算結果，當依賴數據發生變化時，會重新計算；而 watch 屬性不會緩存計算結果，每次都會重新計算。computed 屬性性能比 watch 屬性高，因為它進行了依賴收集。

  1. computed:計算屬性，支持緩存，以來的屬性值發生變化，計算屬性會重新計算，否則用緩存，不支持異步，第一次加載就監聽，函數中必須有return

  2. watch:監聽屬性，監聽data中數據的變化，不支持緩存，支持異步，第一次加載不監聽，可以不用有return

十五.vuex使用場景和屬性

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式和庫。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 適用于需要共享狀態的應用程序。

Vuex 具有以下屬性：

  1. 狀態（state）：Vuex 通過 state 屬性來定義應用程序的狀態。狀態可以是嵌套的對象，也可以是基本的數據類型。

  2. 突變（mutations）：Vuex 通過 mutations 屬性來定義狀態的突變。突變是同步的，并且只能通過 commit 方法來觸發。

  3. 操作（actions）：Vuex 通過 actions 屬性來定義異步操作。操作可以觸發突變，也可以執行其他異步操作。

  4. 模塊（modules）：Vuex 通過 modules 屬性來定義模塊。模塊可以包含自己的狀態、突變、操作和模塊。

Vuex 適用于以下場景：

  1. 單頁面應用程序：Vuex 適用于需要共享狀態的單頁面應用程序。

  2. 多組件應用程序：Vuex 適用于需要共享狀態的多組件應用程序。

  3. 需要狀態持久化的應用程序：Vuex 適用于需要狀態持久化的應用程序。

  4. 需要權限控制的應用程序：Vuex 適用于需要權限控制的應用程序。

使用 Vuex 的步驟：

  1. 安裝 Vuex：

    使用 npm 或 yarn 安裝 Vuex：

    npm install vuex --save

    或

    yarn add vuex

  2. 創建 Vuex store：

    在項目中創建一個名為 store.js 的文件，并在其中創建一個 Vuex store：

    import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}
});

  3. 定義狀態、突變、操作和模塊：

    在 store.js 文件中，可以定義狀態、突變、操作和模塊。例如：

    state: {count: 0
},
mutations: {increment(state) {state.count++;}
},
actions: {increment(context) {context.commit('increment');}
},
modules: {count: {state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment(context) {context.commit('increment');}}}
}

  4. 引入 store 到 main.js：

    在 main.js 文件中，引入 store.js 并將其添加到 Vue 實例中：

    import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({store,render: h => h(App)
}).$mount('#app');

  5. 使用 mapState、mapGetters、mapMutations 和 mapActions：

    在 Vue 組件中，可以使用 mapState、mapGetters、mapMutations 和 mapActions 輔助函數來簡化代碼。例如：

    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';export default {computed: {...mapState(['count'])},methods: {...mapMutations(['increment']),...mapActions(['increment'])}
};

總結：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式和庫，它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 適用于需要共享狀態的應用程序，如單頁面應用程序、多組件應用程序

state:存儲變量

getters:state的計算屬性

mutations:提交更新數據的方法，同步

actions:異步操作

modules:模塊化vuex

用戶個人信息、購物車等

十六.vue雙向綁定的原理

Vue.js 中的雙向綁定是通過 Object.defineProperty() 方法實現的。這個方法可以讓我們在訪問或修改一個屬性時執行一些自定義操作。Vue.js 利用這個方法實現了數據的雙向綁定。

具體來說，Vue.js 會將數據對象中的每個屬性轉換為 getter 和 setter，從而實現數據的雙向綁定。當數據對象中的屬性被訪問或修改時，getter 和 setter 會被觸發，從而更新視圖。

以下是一個簡單的示例：

class Vue {constructor(data) {this.data = data;for (const key in data) {Object.defineProperty(this, key, {get() {return this.data[key];},set(value) {this.data[key] = value;}});}}
}const vm = new Vue({data: {count: 0}
});console.log(vm.count); // 輸出 0
vm.count = 1;
console.log(vm.count); // 輸出 1

在這個示例中，我們創建了一個簡單的 Vue 類，它將數據對象中的每個屬性轉換為 getter 和 setter。當我們訪問或修改 vm.count 時，getter 和 setter 會被觸發，從而更新視圖。

Vue.js 利用這個原理實現了數據的雙向綁定，從而實現數據和視圖的同步。

通過數據劫持結合發布者訂閱者模式，利用object.defineProperty()劫持各個屬性的setter和getter，在數據發生變化時發布消息給訂閱者，觸發相應的監聽回調渲染視圖。

十七.diff和虛擬dom

diff 和虛擬 DOM 是前端性能優化的重要技術。diff 算法用于計算新舊 DOM 之間的差異，從而實現最小化頁面重排和重繪。虛擬 DOM 是一種模擬 DOM 的技術，它將實際 DOM 轉換為虛擬 DOM，然后在虛擬 DOM 上進行操作，最后將虛擬 DOM 轉換回實際 DOM。

diff 算法的核心思想是將新舊 DOM 進行比較，找出它們之間的差異，然后將差異應用到實際 DOM 上。diff 算法的實現方式有很多，如深度優先搜索（DFS）、廣度優先搜索（BFS）等。

虛擬 DOM 的實現方式是將實際 DOM 轉換為虛擬 DOM，然后將虛擬 DOM 存儲在內存中。當需要更新 DOM 時，先將新的虛擬 DOM 轉換回實際 DOM，然后將新 DOM 與舊 DOM 進行比較，找出差異，最后將差異應用到實際 DOM 上。

以下是一個簡單的示例：

// 假設這是實際 DOM
const oldDom = document.createElement('div');
oldDom.innerHTML = '<p>Hello, World!</p>';// 創建虛擬 DOM
const vdom = {type: 'div',props: {},children: [{type: 'p',props: {},children: ['Hello, World!']}]
};// 將虛擬 DOM 轉換回實際 DOM
const newDom = createElement(vdom);// 比較新舊 DOM，找出差異
const patches = diff(oldDom, newDom);// 將差異應用到實際 DOM 上
applyPatches(oldDom, patches);

在這個示例中，我們首先創建了一個實際 DOM 和一個虛擬 DOM。然后，我們將虛擬 DOM 轉換回實際 DOM，并比較新舊 DOM，找出差異。最后，我們將差異應用到實際 DOM 上。

通過使用 diff 和虛擬 DOM，我們可以實現前端性能優化，減少頁面重排和重繪。

虛擬dom，描述元素與元素之間的關系，創建的一個js對象。

如果組件內有響應的數據，數據發生改變時，render函數會生成一個新的虛擬dom，新的虛擬dom會和舊的虛擬dom進行比對，找到需要修改的虛擬dom內容，然后去對應的真實dom中修改。

diff是虛擬dom對比時用的，返回一個patch對象來存儲兩個節點不同的地方，最后用patch里的記錄信息更新真實dom。

十八.vue和jquery的區別

Vue.js 和 jQuery 都是前端流行的 JavaScript 庫，但它們之間存在一些關鍵區別。

  1. 核心思想：Vue.js 的核心思想是數據綁定和視圖渲染，而 jQuery 的核心思想是選擇器、操作 DOM 和事件處理。

  2. 語法：Vue.js 使用基于 HTML 的模板語法，而 jQuery 使用基于 CSS 的選擇器語法。

  3. 數據綁定：Vue.js 支持數據雙向綁定，而 jQuery 不支持。

  4. 視圖渲染：Vue.js 支持組件化和響應式視圖，而 jQuery 不支持。

  5. 性能：Vue.js 的性能通常比 jQuery 更高，因為它使用了虛擬 DOM 和優化了 DOM 操作。

  6. 社區支持：Vue.js 擁有龐大的社區支持，而 jQuery 的社區支持正在逐漸減少。

  7. 兼容性：Vue.js 支持現代瀏覽器，而 jQuery 支持舊版瀏覽器。

總結：Vue.js 和 jQuery 都是前端流行的 JavaScript 庫，但它們之間存在一些關鍵區別。Vue.js 更注重數據綁定和視圖渲染，而 jQuery 更注重選擇器、操作 DOM 和事件處理。在性能、社區支持和兼容性等方面，Vue.js 通常比 jQuery 更具優勢。

  1. 原理不同:vue就是數據綁定，jq時先獲取dom在處理。

  2. 著重點不同:vue是數據驅動，jq著重于頁面。

  3. 操作不同

十九.vuex的響應式處理

觸發事件的時候會通過dispatch來訪問action中的方法，actions中的commit會觸發mutations中的方法從而修改state里的值，通過getter把數據更新到視圖

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/41944.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/41944.shtml
英文地址，請注明出處：http://en.pswp.cn/web/41944.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

權力之望怎么下載客戶端 權力之望一鍵下載

權力之望怎么下載客戶端 權力之望一鍵下載

《權力之望》是一款由NX3 Games開發、Smilegate發行的多人在線動作MMORPG游戲。這款游戲最大的特點是高度的自由度和豐富的角色定制選項。我們在游戲中不僅可以自由更換武器&#xff0c;而且游戲還提供了54種能力和60多種職業選擇&#xff0c;讓我們可以根據自己的游戲風格和喜…
閱讀更多...
繼 承

繼 承

為什么要有繼承&#xff0c;繼承的作用&#xff1f; 繼承(inheritance)機制&#xff1a;是面向對象程序設計使代碼可以復用的最重要的手段&#xff0c;它允許程序員在保持原有類特性的基礎上進行擴展&#xff0c;增加新功能&#xff0c;這樣產生新的類&#xff0c;稱派生類。 …
閱讀更多...
【人工智能】—基于成都市各區（市）縣租房價格預測建模研究

【人工智能】—基于成都市各區（市）縣租房價格預測建模研究

引言 隨著城市化進程的加速&#xff0c;人口流動日益頻繁&#xff0c;租房市場作為城市生活的重要組成部分&#xff0c;其價格波動對居民生活質量和城市經濟發展具有顯著影響。成都市&#xff0c;作為中國西部地區的經濟、文化、交通和科技中心&#xff0c;近年來吸引了大量人…
閱讀更多...
為什么獨立站需要高質量的GPB外鏈？

為什么獨立站需要高質量的GPB外鏈？

獨立站需要高質量的GPB外鏈&#xff0c;主要是因為它們能顯著提升網站的可信度和可見性。高質量的外鏈相當于得到其他權威網站的認可和推薦&#xff0c;這會讓搜索引擎認為你的內容有價值&#xff0c;從而提升你的搜索排名。試想一下&#xff0c;當其他有影響力的網站愿意鏈接到…
閱讀更多...
非阻塞式 I/O 模型 【NIO】補充內容

非阻塞式 I/O 模型 【NIO】補充內容

NIO是一種同步非阻塞IO, 基于Reactor模型來實現的。其實相當于就是一個線程處理大量的客戶端的請求&#xff0c;通過一個線程輪詢大量的channel&#xff0c;每次就獲取一批有事件的channel&#xff0c;然后對每個請求啟動一個線程處理即可。這里的核心就是非阻塞&#xff0c;就…
閱讀更多...
請求接口在控制臺報cors跨域問題

請求接口在控制臺報cors跨域問題

我的問題是&#xff1a;BASE_URL沒有和本地IP設置一致 剛開始&#xff1a;&#xff08;這個不是我本地電腦的地址&#xff09; 所以我要把&#xff1a;這個地址改為我本地電腦的ip&#xff08;http://192.168.2.50:8087&#xff09; BASE_URL: http://localhost:8087/api/ 或…
閱讀更多...
單位電腦文檔怎么加密？哪種方法最有效？

單位電腦文檔怎么加密？哪種方法最有效？

單位電腦文檔的加密是保障信息安全的重要措施之一&#xff0c;它可以防止未經授權的訪問和數據泄露。 選擇最佳的加密方法取決于您的具體需求&#xff0c;包括文檔的敏感程度、加密的便捷性、成本、以及是否需要跨平臺兼容性。下面是幾種常見的加密方法及其優缺點&#xff0c;…
閱讀更多...
【SpringBoot3】結合 gRpc 實現遠程服務調用

【SpringBoot3】結合 gRpc 實現遠程服務調用

一、gRPC概念介紹 gRPC&#xff08;Google Remote Procedure Call&#xff0c;Google遠程過程調用&#xff09;是一個現代開源高性能遠程過程調用(RPC)框架&#xff0c;可以在任何環境中運行。它由Google開發&#xff0c;旨在幫助開發人員更輕松地構建分布式應用&#xff0c;特…
閱讀更多...
昇思學習打卡-8-FCN圖像語義分割

昇思學習打卡-8-FCN圖像語義分割

目錄 FCN介紹FCN所用的技術訓練數據的可視化模型訓練模型推理FCN的優點和不足優點不足 FCN介紹 FCN主要用于圖像分割領域&#xff0c;是一種端到端的分割方法&#xff0c;是深度學習應用在圖像語義分割的開山之作。通過進行像素級的預測直接得出與原圖大小相等的label map。因…
閱讀更多...
clean code-代碼整潔之道 閱讀筆記（第十六章）

clean code-代碼整潔之道 閱讀筆記（第十六章）

第十六章 重構SerialDate 16.1 首先&#xff0c;讓它能工作 利用SerialDateTests來完整的理解和重構SerialDate用Clover來檢查單元測試覆蓋了哪些代碼&#xff0c;效果不行重新編寫自己的單元測試經過簡單的修改&#xff0c;讓測試能夠通過 16.2 讓它做對 全過程&#xff1…
閱讀更多...
若依微服務初始化搭建教程

若依微服務初始化搭建教程

文章目錄 &#x1f95d;從Gitee拉取代碼&#x1f344;初始化項目配置配置項目maven配置項目JDKmaven - clean - install &#x1f352;數據源配置創建config / seata數據庫創建ry-cloud數據源導入ry-cloud數據 &#x1f370;啟動Nacos下載Nacos修改Nacos配置雙擊startup.cmd啟動…
閱讀更多...
梧桐數據庫：查詢優化器是提升數據庫性能的關鍵技術

梧桐數據庫：查詢優化器是提升數據庫性能的關鍵技術

查詢優化器是數據庫管理系統中的核心組件之一&#xff0c;它的主要作用是在執行查詢語句之前&#xff0c;選擇最優的執行計劃&#xff0c;以提高查詢性能。 查詢優化器的基本原理 查詢優化器的主要目標是找到一個執行代價最小的查詢執行計劃。它通過對查詢語句進行語法分析、…
閱讀更多...
GraphRAG：AI的全局文本理解革新

GraphRAG：AI的全局文本理解革新

前言 在人工智能領域&#xff0c;處理和理解大量文本數據始終是一個挑戰。隨著大型語言模型&#xff08;LLMs&#xff09;的出現&#xff0c;自動化地進行復雜的語義理解和文本摘要變得可能。檢索增強生成&#xff08;RAG&#xff09;方法因其能有效結合檢索與生成技術&#x…
閱讀更多...
C++基礎語法之重載引用和命名空間等

C++基礎語法之重載引用和命名空間等

1.C關鍵字 c的關鍵字比我們的c語言的關鍵字多&#xff0c;c包容C語言并對C語言進行了補充&#xff0c;但是我們對關鍵字的學習是在我們后面逐漸學習的。這里我們的只是提供一個表格對齊了解一下。 2.命名空間 我們c出現了命名空間的概念&#xff0c;用關鍵字namespace來定義。…
閱讀更多...
LeetCode 二分查找

LeetCode 二分查找

1.題目要求: 給定一個 n 個元素有序的&#xff08;升序&#xff09;整型數組 nums 和一個目標值 target &#xff0c;寫一個函數搜索 nums 中的 target&#xff0c;如果目標值存在返回下標&#xff0c;否則返回 -1。示例 1:輸入: nums [-1,0,3,5,9,12], target 9 輸出: 4 解…
閱讀更多...
論文閱讀 - Intriguing properties of neural networks

論文閱讀 - Intriguing properties of neural networks

Intriguing properties of neural networks 經典論文、對抗樣本領域的開山之作 發布時間&#xff1a;2014 論文鏈接: https://arxiv.org/pdf/1312.6199.pdf 作者&#xff1a;Christian Szegedy, Wojciech Zaremba, Ilya Sutskever, Joan Bruna, Dumitru Erhan, Ian Goodfellow,…
閱讀更多...
信息技術課堂上如何有效防止學生玩游戲？

信息技術課堂上如何有效防止學生玩游戲？

防止學生在信息技術課堂上玩游戲需要綜合運用教育策略和技術手段。以下是一些有效的措施&#xff0c;可以用來阻止或減少學生在課堂上玩游戲的行為&#xff1a; 1. 明確課堂規則 在課程開始之初&#xff0c;向學生清楚地說明課堂紀律&#xff0c;強調不得在上課時間玩游戲。 制…
閱讀更多...
電阻負載柜的工作原理是什么？

電阻負載柜的工作原理是什么？

電阻負載柜是用于模擬電網中各種負載特性的設備&#xff0c;廣泛應用于電力系統、新能源發電、電動汽車充電站等領域。其工作原理主要包括以下幾個方面&#xff1a; 1. 結構組成&#xff1a;電阻負載柜主要由變壓器、調壓器、電阻器、控制器、保護裝置等部分組成。其中&#xf…
閱讀更多...
理解神經網絡的通道數

理解神經網絡的通道數

理解神經網絡的通道數 1. 神經網絡的通道數2. 輸出的寬度和長度3. 理解神經網絡的通道數3.1 都是錯誤的圖片惹的禍3.1.1 沒錯但是看不懂的圖3.1.2 開玩笑的錯圖3.1.3 給人誤解的圖 3.2 我或許理解對的通道數3.2.1 動圖演示 1. 神經網絡的通道數 半路出嫁到算法崗&#xff0c;額…
閱讀更多...
數據防泄密軟件精選|6款好用的數據防泄漏軟件強推

數據防泄密軟件精選|6款好用的數據防泄漏軟件強推

某科技公司會議室&#xff0c;CEO張總、CIO李總、信息安全主管王經理正圍繞最近發生的一起數據泄露事件展開討論。 張總&#xff08;憂慮&#xff09;: 大家&#xff0c;這次的數據泄露事件對我們來說是個沉重的打擊。客戶信息的外泄不僅損害了我們的信譽&#xff0c;還可能面…
閱讀更多...
最新文章

Copyright @ 2022~2023