當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue学习记录：遇到过的问题记录

發(fā)布時間：2025/3/20 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue学习记录：遇到过的问题记录小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

項目構建

vue-cli 安裝中找不到vue命令

這是在ubuntu系統(tǒng)中遇到的，全局安裝后可以

npm install -g vue-cli

Vue 組件間通信

父子 props/event $parent/$children ref provide/inject
兄弟 bus vuex
跨級 bus vuex provide.inject

1、在vue中子組件為何不可以修改父組件傳遞的Prop，如果修改了，2、Vue是如何監(jiān)控到屬性的修改并給出警告的

單向數(shù)據(jù)流，易于監(jiān)測數(shù)據(jù)的流動，出現(xiàn)了錯誤可以更加迅速的定位到錯誤發(fā)生位置

每當父組件屬性值修改時，該值都將被覆蓋。
——> 引申出一個問題：

如果在子組件需要修改prop呢？ - 通過事件修改父組件狀態(tài) - 或者子組件把prop賦給data（）或者comuted，

如果修改了：

Vue 是如何監(jiān)控到屬性的修改并給出警告的

webpack

https://vuejs-templates.githu...

打包優(yōu)化

優(yōu)化vue項目打包速度(webpack)

懶加載（按需加載路由）

webpack 中提供了 require.ensure()來實現(xiàn)按需加載。以前引入路由是通過 import 這樣的方式引入，改為 const 定義的方式進行引入。

不進行頁面按需加載引入方式：

import home from '../../common/home.vue'

進行頁面按需加載的引入方式：

const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

https://blog.csdn.net/qq_2762...

watch

Vue開發(fā)——watch監(jiān)聽數(shù)組、對象、變量
這里要注意的是對數(shù)組的watch

vue——數(shù)組的深度監(jiān)聽

組件 v-if 和 v-show 切換時生命周期鉤子的執(zhí)行

v-if
初始渲染
初始值為 false 組件不會渲染，生命周期鉤子不會執(zhí)行，v-if 的渲染是惰性的。
初始值為 true 時，組件會進行渲染，并依次執(zhí)行 beforeCreate,created,beforeMount,mounted 鉤子。
切換
false => true
依次執(zhí)行 beforeCreate,created,beforeMount,mounted 鉤子。
true => false
依次執(zhí)行 beforeDestroy,destroyed 鉤子。
v-show
渲染
無論初始狀態(tài)，組件都會渲染，依次執(zhí)行 beforeCreate,created,beforeMount,mounted 鉤子，v-show 的渲染是非惰性的。
切換
對生命周期鉤子無影響，切換時組件始終保持在 mounted 鉤子。

自定義指令

v-WaterMark

// chart/WaterMark.js export default class WaterMark {constructor (userNm, userCd) {this.userNm = userNmthis.userCd = userCd}draw () {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')canvas.width = 250canvas.height = 130ctx.translate(canvas.width / 2, canvas.height / 2 - 35)ctx.rotate(-Math.PI / 12)ctx.font = '700 12px/Mircosoft Yahei'ctx.textAlign = 'center'ctx.textBaseline = 'middle'ctx.fillStyle = '#eaf0f5'// ctx.fillStyle = '#f00'ctx.fillText(`鏡心的小樹屋 ${this.userNm} ${this.userCd}`, 0, 0)return canvas.toDataURL('image/png')} } // rule.js /*** 用戶信息相關*/ exports.useInfor = {data: {name: '',userCd: '',userNm: ''},clear: function () {this.data = {name: '',userCd: '',userNm: '',flag: false}} } // directives/WaterMark.js import WaterMark from '../chart/WaterMark.js' import { useInfor } from '../rule'export default {inserted (el, binding) {let timer = setInterval(() => {if (useInfor.data.userNm && useInfor.data.userCd) {let wMark = new WaterMark(useInfor.data.userNm, useInfor.data.userCd)let imageSrc = wMark.draw()if (binding.value && binding.value === false) returnel.style.background = `#fff url(${imageSrc}) repeat top left`clearInterval(timer)}}, 50)} }

v-check

v-focus

// https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0 // 注冊一個全局自定義指令 'v-focus' export default {// 當被綁定的元素插入到 DOM 中時……inserted: function (el) {// 聚焦元素el.focus()} }

路由之間跳轉

聲明式（標簽跳轉）
編程式（ js 跳轉） router.push('index')

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Undefined. Vue出現(xiàn)該錯誤的解決辦法

https://www.cnblogs.com/sifo/...

iview樣式修改不生效

在使用vue框架iview是經常需要在組件里面修改某一個樣式，為了防止組件之間的樣式污染，我們需要使用scoped來限制在當前組件內生效，但往往樣式會無法生效。我之前的解決方案是在當前這個組件的父級加一個只有當前組件才有的class然后早style沒有scoped中去寫樣式，這樣既可以改變iview自帶的樣式，也可以人為去限制組件之間的樣式污染，這也是當時沒有辦法下自己想到的唯一的辦法。最近又發(fā)現(xiàn)一個新的解決方案/deep/深度選擇器 ->戳這里

.reset-sub-modal /deep/ .ivu-modal-footerpadding-bottom: 25px

生命周期

https://www.cnblogs.com/golov...

vue中的dom異步更新及$nextTick()

1、dom異步更新的原理

觀察到數(shù)據(jù)變化，vue開啟一個隊列，并緩沖同一事件循環(huán)的所有數(shù)據(jù)變化；
如果同一個watcher被多次觸發(fā)，只會被推入隊列中一次；（去重，避免不必要計算和DOM操作）
在下一個事件循環(huán)tick中，vue刷新隊列并執(zhí)行已去重的工作；

2、vue.nextTick()

因此，改數(shù)據(jù)（eg vm.someData = ’88’）時，組件不會馬上更新，而是在vue下一個tick刷新隊列時更新；
為了在數(shù)據(jù)變化后，要在vue的dom狀態(tài)更新后做什么，可在數(shù)據(jù)變化后調用vue.nextTick(callback),則dom更新完成后會調用回調函數(shù)；

3、nextTick的使用場景

Vue生命周期的created()鉤子函數(shù)進行的DOM操作一定要放在Vue.nextTick()的回調函數(shù)中；
在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數(shù)中；

更多原理和示例戳這里

內置組件component

文檔
簡單示例: https://jsfiddle.net/chrisvfr...

正常項目中：

.sync

對于VUE的初學者來講，肯定會感覺prop的寫法很麻煩，很討厭！你肯定想如果prop也可以實現(xiàn)雙向綁定那怎是一個爽字了得！不過現(xiàn)實是殘酷的，如果子組件可以任意修改父組件的內容，那勢必會帶來數(shù)據(jù)的混亂，從而造成維護的困擾！畢竟父組件也是有尊嚴的！

https://www.jianshu.com/p/d42...

觸發(fā)其他組件方法

使用 Vue.js 怎么調用其他組件的方法
中央事件總線eventbus

/*** 中央事件總線* 這個插件可以在可以在所有的組件之間隨意使用 * 常用于兄弟組件間通信* 注意：* $bus.on應該在 created鉤子內使用，如果在mounted使用，它可能接受不到其他組件來自created鉤子發(fā)出的事件 * 第二點是使用了$bus.on，在beforeDestroy鉤子里應該使用$bus.off解除，因為組件銷毀后，就沒必要把監(jiān)聽的句柄儲存在vue-bus里了* @param {*} Vue 傳入的Vue class*/ const install = function (Vue) {const Bus = new Vue ({methods: {emit (event, ...args) {this.$emit(event, ...args)},on (event, callback) {this.$on(event, callback) },off (event, callback) {this.$off(event, callback)}}})Vue.prototype.$bus = Bus }export default install

多次觸發(fā)問題-> issue

常用組件

資料集合
multiselect
在 vue-multiselect 基礎上創(chuàng)建 ImageSelect 組件
https://github.com/vuejs/awes...

webpack打包速度優(yōu)化

我的知乎專欄

實現(xiàn)label-required

.label-requireddisplay: inline-blockheight: 33pxline-height: 28px&:beforecontent: '*'display: inline-blockmargin-right: 4pxline-height: 1font-family: SimSunfont-size: 12pxcolor: #ed3f14

$parent

$parent 也可以用來訪問父組件的數(shù)據(jù)。

而且子組件可以通過$parent 來直接修改父組件的數(shù)據(jù)，不會報錯！

可以使用props的時候，盡量使用props顯式地傳遞數(shù)據(jù)（可以很清楚很快速地看出子組件引用了父組件的哪些數(shù)據(jù)）。

另外在一方面，直接在子組件中修改父組件的數(shù)據(jù)是很糟糕的做法，props單向數(shù)據(jù)流就沒有這種顧慮了。

禁止直接更改組件上的class樣式，用自定義class覆蓋

自動化部署

非大廠隔離環(huán)境的話可用ssh（大廠生產環(huán)境是隔離的要通過跳板機代碼不可能通過ssh直接發(fā)到生產的）：
Vue-CLI 3.x 自動部署項目至服務器

常見問題

組件中 data 為什么是函數(shù)

為什么組件中的 data 必須是一個函數(shù)，然后 return 一個對象，而 new Vue 實例里，data 可以直接是一個對象？

因為組件是用來復用的，JS 里對象是引用關系，這樣作用域沒有隔離；而 new Vue 的實例，是不會被復用的，因此不存在引用對象的問題。

v-model原理解析

從最初學習Vue就知道v-model可以實現(xiàn)雙數(shù)據(jù)綁定，但它能實現(xiàn)綁定的原理到底是什么呢？通過查看官方文檔和各種博客資料，以下是我的理解。

根據(jù)官方文檔介紹，v-model本質上就是語法糖，即利用v-model綁定數(shù)據(jù)后，其實就是既綁定了數(shù)據(jù)，又添加了一個input事件監(jiān)聽，如下：
https://www.cnblogs.com/attac...

雙向綁定原理

這個問題幾乎是面試必問的，回答也是有深有淺。基本上要知道核心的 API 是通過 Object.defineProperty() 來劫持各個屬性的setter / getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調，這也是為什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且無法通過 polyfill 實現(xiàn)）
https://cn.vuejs.org/v2/guide...

vue.js 是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調。

具體步驟：
第一步：需要 observe 的數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter 這樣的話，給這個對象的某個值賦值，就會觸發(fā) setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步：compile 解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要做的事情是:

在自身實例化時往屬性訂閱器(dep)里面添加自己
自身必須有一個 update()方法
待屬性變動 dep.notice()通知時，能調用自身的 update() 方法，并觸發(fā) Compile 中綁定的回調，則功成身退。

第四步：MVVM 作為數(shù)據(jù)綁定的入口，整合 Observer、Compile 和 Watcher 三者，通過 Observer 來監(jiān)聽自己的 model 數(shù)據(jù)變化，通過 Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通信橋梁，達到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù) model 變更的雙向綁定效果。

vue-router

vue-router 有哪幾種導航鉤子?

全局導航鉤子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
組件內鉤子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
單獨路由獨享組件
beforeEnter

import NProgress from 'nprogress' // http://ricostacruz.com/nprogress/

vue 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 action 中?

如果請求來的數(shù)據(jù)不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入 vuex 的 state 里

如果被其他地方復用，請將請求放入 action 里，方便復用，并包裝成 promise 返回

參考

vue中的css作用域、vue中的scoped坑點
css loader 深度作用選擇器
vue nextTick深入理解－vue性能優(yōu)化、DOM更新時機、事件循環(huán)機制
Vue.js 技術揭秘
Vue技術內幕
深度剖析：如何實現(xiàn)一個?Virtual?DOM?算法
Vue使用中的小技巧
Vue問得最多的面試題

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue学习记录：遇到过的问题记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： httpd编译安装
下一篇：【BFS】【并查集】【Tarjan】【L