vue緩存使用說明書_使用vue框架開發版本更新怎麼解決用戶瀏覽器緩存問題

『壹』 Vue組件中prop屬性使用說明實例代碼詳解

Prop
的大小寫
(camelCase
vs
kebab-case)
HTML
中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。這意味著當你使用
DOM
中的模板時，camelCase
(駝峰命名法)
的
prop
名需要使用其等價的
kebab-case
(短橫線分隔命名)
命名：
Vue.component('blog-post',
{
//
在
JavaScript
中是
camelCase
的
props:
['postTitle'],
template:
'<h3>{{
postTitle
}}</h3>'
})

<blog-post
post-title="hello!"></blog-post>
重申一次，如果你使用字元串模板，那麼這個限制就不存在了。
靜態的和動態的
Prop
像這樣，你已經知道了可以像這樣給
prop
傳入一個靜態的值：
<blog-post
title="My
journey
with
Vue"></blog-post>
你也知道
prop
可以通過
v-bind
動態賦值，例如：
<blog-post
v-bind:title="post.title"></blog-post>
在上述兩個示例中，我們傳入的值都是字元串類型的，但實際上任何類型的值都可以傳給一個
prop。
傳入一個數字


<blog-post
v-bind:likes="42"></blog-post>

<blog-post
v-bind:likes="post.likes"></blog-post>
傳入一個布爾值

<blog-post
favorited></blog-post>


<base-input
v-bind:favorited="false">

<base-input
v-bind:favorited="post.currentUserFavorited">
傳入一個數組


<blog-post
v-bind:comment-ids="[234,
266,
273]"></blog-post>

<blog-post
v-bind:comment-ids="post.commentIds"></blog-post>
傳入一個對象


<blog-post
v-bind:comments="{
id:
1,
title:
'My
Journey
with
Vue'
}"></blog-post>

<blog-post
v-bind:post="post"></blog-post>
傳入一個對象的所有屬性
如果你想要將一個對象的所有屬性都作為
prop
傳入，你可以使用不帶參數的
v-bind
(取代
v-bind:prop-name)。例如，對於一個給定的對象
post：
post:
{
id:
1,
title:
'My
Journey
with
Vue'
}
下面的模板：
<blog-post
v-bind="post"></blog-post>
等價於：
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
Vue的組件中的props屬性單向數據流
所有的
prop都使得其父子prop之間形成了一個單向下行綁定：父級
prop
的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中所有的
prop
都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變
prop。如果你這樣做了，Vue
會在瀏覽器的控制台中發出警告。
這里有兩種常見的試圖改變一個
prop
的情形：
這個
prop
用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的
prop
數據來使用。在這種情況下，最好定義一個本地的
data
屬性並將這個
prop
用作其初始值：
props:
['initialCounter'],
data:
function
()
{
return
{
counter:
this.initialCounter
}
}
這個
prop
以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個
prop
的值來定義一個計算屬性：
props:
['size'],
computed:
{
normalizedSize:
function
()
{
return
this.size.trim().toLowerCase()
}
}
注意在
JavaScript
中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的
prop
來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。
Prop
驗證
我們可以為組件的
prop
指定需求。如果有一個需求沒有被滿足，則
Vue
會在瀏覽器控制台中警告你。這在開發一個會被別人用到的組件時尤其有幫助。
為了定製
prop
的驗證方式，你可以為
props
中的值提供一個帶有驗證需求的對象，而不是一個字元串數組。例如：
Vue.component('my-component',
{
props:
{
//
基礎的類型檢查
(`null`
匹配任何類型)
propA:
Number,
//
多個可能的類型
propB:
[String,
Number],
//
必填的字元串
propC:
{
type:
String,
required:
true
},
//
帶有默認值的數字
propD:
{
type:
Number,
default:
100
},
//
帶有默認值的對象
propE:
{
type:
Object,
//
對象或數組且一定會從一個工廠函數返回默認值
default:
function
()
{
return
{
message:
'hello'
}
}
},
//
自定義驗證函數
propF:
{
validator:
function
(value)
{
//
這個值必須匹配下列字元串中的一個
return
['success',
'warning',
'danger'].indexOf(value)
!==
-1
}
}
}
})
當
prop
驗證失敗的時候，(開發環境構建版本的)
Vue
將會產生一個控制台的警告。
注意那些
prop
會在一個組件實例創建之前進行驗證，所以實例的屬性
(如
data、computed
等)
在
default
或
validator
函數中是不可用的。
類型檢查
type
可以是下列原生構造函數中的一個：
String
Number
Boolean
Function
Object
Array
Symbol
額外的，type
還可以是一個自定義的構造函數，並且通過
instanceof
來進行檢查確認。例如，給定下列現成的構造函數：
function
Person
(firstName,
lastName)
{
this.firstName
=
firstName
this.lastName
=
lastName
}
你可以使用：
Vue.component('blog-post',
{
props:
{
author:
Person
}
})
來驗證
author
prop
的值是否是通過
new
Person
創建的。
非
Prop
的特性
一個非
prop
特性是指傳向一個組件，但是該組件並沒有相應
prop
定義的特性。
因為顯式定義的
prop
適用於向一個子組件傳入信息，然而組件庫的作者並不總能預見組件會被用於怎樣的場景。這也是為什麼組件可以接受任意的特性，而這些特性會被添加到這個組件的根元素上。
例如，想像一下你通過一個
Bootstrap
插件使用了一個第三方的
組件，這個插件需要在其
上用到一個
data-date-picker
特性。我們可以將這個特性添加到你的組件實例上：
<bootstrap-date-input
data-date-picker="activated"></bootstrap-date-input>
然後這個
data-date-picker=」activated」
特性就會自動添加到<bootstrap-date-input>
的根元素上。
替換/合並已有的特性
想像一下
<bootstrap-date-input>
的模板是這樣的：
<input
type="date"
class="form-control">
為了給我們的日期選擇器插件定製一個主題，我們可能需要像這樣添加一個特別的類名：
<bootstrap-date-input
data-date-picker="activated"
class="date-picker-theme-dark"
></bootstrap-date-input>
在這種情況下，我們定義了兩個不同的
class
的值：
form-control，這是在組件的模板內設置好的
date-picker-theme-dark，這是從組件的父級傳入的
對於絕大多數特性來說，從外部提供給組件的值會替換掉組件內部設置好的值。所以如果傳入
type=」text」
就會替換掉
type=」date」
並把它破壞！慶幸的是，class
和
style
特性會稍微智能一些，即兩邊的值會被合並起來，從而得到最終的值：form-control
date-picker-theme-dark。
禁用特性繼承
如果你不希望組件的根元素繼承特性，你可以設置在組件的選項中設置
inheritAttrs:
false。例如：
Vue.component('my-component',
{
inheritAttrs:
false,
//
...
})
這尤其適合配合實例的
$attrs
屬性使用，該屬性包含了傳遞給一個組件的特性名和特性值，例如：
{
class:
'username-input',
placeholder:
'Enter
your
username'
}
有了
inheritAttrs:
false
和
$attrs，你就可以手動決定這些特性會被賦予哪個元素。在撰寫基礎組件的時候是常會用到的：
Vue.component('base-input',
{
inheritAttrs:
false,
props:
['label',
'value'],
template:
`
<label>
{{
label
}}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input',
$event.target.value)"
>
</label>
`
})
這個模式允許你在使用基礎組件的時候更像是使用原始的
HTML
元素，而不會擔心哪個元素是真正的根元素：
<base-input
v-model="username"
class="username-input"
placeholder="Enter
your
username"
></base-input>
總結
以上所述是小編給大家介紹的Vue組件中prop屬性使用說明，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:VueJs組件prop驗證簡單介紹Vue組件選項props實例詳解vue父組件通過props如何向子組件傳遞方法詳解詳解vue2父組件傳遞props非同步數據到子組件的問題詳解vue父子組件間傳值(props)Vue2.0利用
v-model
實現組件props雙向綁定的優美解決方案

『貳』 vue js版本更新，但用戶的瀏覽器有緩存之前的vue文件

你的vuejs版本更新難道是直接覆蓋伺服器文件，而不是

/vue/2.5.13/vue.js

/vue/2.5.12/vue.js

這樣分版本存放？趕緊改吧

『叄』 vue.js中，什麼時候用methods什麼時候用computed什麼時候用watch

computed
以前的名字叫做ready
是在dom載入後馬上執行的。

而methods中的函數，則必須要有一定的觸發條件。
在模板中綁定表達式是非常便利的，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用**計算屬性**。
Vue實例的computed的屬性
<div class="test">
<p>原始的信息{{message}}</p>
<p>計算後的信息{{ComputedMessage}}</p>
</div>

js代碼
var myVue = new Vue({
el: ".test",
data: {
message:12
},
computed:{
ComputedMessage:function () {
return this.message+10;
}
}
});

界面會顯示 12 和 22
上述的方式是一種緩沖的實現的效果，這種實現的方式依賴於它的緩寸，計算得到的屬性只有在相關依賴（message）改變的時候才會重新取值，這就意味著只要message沒有發生改變的時候，多次訪問ComputedMessage都不會再重新執行計算的這個屬性。。

計算後的ComputedMessage屬性始終是依賴於message的
通過調用函數實現同樣的效果
<div class="test">
<p>原始的信息{{message}}</p>
<p>計算後的信息{{MessageFunction()}}</p>
</div>

js代碼
var myVue = new Vue({
el: ".test",
data: {
message:12
},
methods:{
MessageFunction:function () {
return this.message+10;
}
}
});

得到的結果和上面的結果是一樣的，但是每次被重新渲染的時候都會被重新調用。
所以使用上述兩種方式的時候，首先要確定你是否需要藉助緩存
使用vue實例的watch
這個沒有看懂呀
但是使用computed這個屬性更加的方便和快捷
<div class="test">
<p>原始的信息{{fullName}}</p>
</div>

js代碼
var myVue = new Vue({
el: ".test",
data: {
firstName:"fur",
lastName:"bool"
},
computed:{
fullName:function () {
return this.firstName+this.lastName
}
}
});

而且你可以computed屬性設置setter getter是默認就有的。

演示set和get的調用過程
<div class="test">
<p>原始的信息{{fullName}}</p>
<button @click="fu">test</button>
</div>

js代碼
var myVue = new Vue({
el: ".test",
data: {
firstName:"fur",
lastName:"bool",
fullName:"sasas dsdsd dsds"
},
computed:{
fullName:{
get:function () {
console.log("get")
return this.firstName+this.lastName
},
set:function(value){
var names=value.split(" ");
this.firstName=names[0];
this.lastName=names[names.length-1];
console.log("set");
}
}
},
methods:{
fu:function () {
myVue.fullName="sasas dsdsd dsds";
console.log(myVue.firstName); //sasas
console.log(myVue.lastName); //dsds
}
}
});

首先會輸出get；

在點擊按鈕為fullName賦值的時候首先調用set 再調用get方法。
自定義的Watcher
雖然計算屬性在大多數情況下是非常合適的，但是有的時候也需要自定義一個watcher。這是因為你想要在數據變化響應的時候，執行非同步操作胡總和其他的操作是非常有用的。

『肆』 vue 不是路由跳轉的頁面怎麼緩存

vue緩存主要四種方式:

使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中

『伍』使用vue框架開發，版本更新，怎麼解決用戶瀏覽器緩存問題

vue-cli里的默認配置，css和js的名字都加了哈希值，所以新版本css、js和就舊版本的名字是不同的，不會有緩存問題。

不過值得注意的是，把打包好的index.html放到伺服器里去的時候，index.html在伺服器端可能是有緩存的，這需要在伺服器配置不讓緩存index.html。

『陸』組件之間來回跳轉如何緩存數據

組件的切換與緩存原創
2021-11-11 21:47:12
2點贊

weixin_58384302

碼齡1年

關注
SPA頁面是多組件拼起來的,這時候就存在組件之間的切換問題，Vue中也提出了動態組件的概念,使得我們可以更好的實現組件之間的切換效果 , 但是vue中組件的切換實際是組件本身重新創建和銷毀的過程,在某些場景下我們並不希望組件被重新創建重新渲染

這里我就主要介紹Vue中組件的切換以及緩存解決方法

一、組件的切換方式
(1) 使用 v-if和v-else或者(v-show)
當裡面的istrue為true時,Com1顯示,否則就是Com2進行顯示

(2) 使用is特性來進行動態組件的切換
(3) 使用路由(router)進行動態組件的切換
二、組件緩存
組件的緩存可以在進行動態組件切換的時候對組件內部數據進行緩存,而不是走銷毀流程

使用場景: 多表單切換,對表單內數據進行保存

1.keep-alive定義:
包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。當組件在<keep-alive>內被切換，它的activated和 deactivated這兩個生命周期鉤子函數將會被對應執行。

2.keep-alive的兩個鉤子函數
activated deactivated
在 keep-alive 組件激活時調用在keep-alive 組件停用時調用
該鉤子函數在伺服器端渲染期間不被調用該鉤子在伺服器端渲染期間不被調用
使用keep-alive會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在 activated階段獲取數據，承擔原來created鉤子函數中獲取數據的任務。

注意：只有組件被keep-alive包裹時，這兩個生命周期函數才會被調用，如果作為正常組件使用，是不會被調用的

『柒』 vue視頻無法保存11819

摘要 1、先去vue軟體"設置"里清除緩存，再保存就好了，不用重啟什麼的。

『捌』 vue項目中怎麼緩存圖片，可以使用<keep-alive></keep-alive>緩存圖片嗎，輪播圖中怎麼用

緩存圖片是瀏覽器默認做的事情，你不需要任何操作。你不需要緩存的時候才需要添加一些信息。<keep-alive></keep-alive>是用來緩存路由的，緩存下來的路由再次進入和上次離開時的狀態是一樣的(不會再次觸發created鉤子)。

『玖』 vue 想要返回頁面停留在離開頁面時的位置，無論用什麼方法，是必須要用keep-alive嗎

最近項目中由於列表居多且都做了下拉刷新上拉載入，所以就使用了keep-alive組件來緩存頁面數據，但是當在其他頁面做一些操作改變了列表數據，當來到列表的時候每次都要下拉刷新一下，體驗不好，所以就使用到了EventBus，在需要更新的時候就用EventBus來刷新列表。

1.keep-alive組件

keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節省性能，由於是一個抽象組件，所以在頁面渲染完畢後不會被渲染成一個DOM元素。但是對於展示型頁面比較好用，表單類頁面也會將所填數據保存起來，對於那種表單沒提交又需要保存所填數據的場景非常實用。

keep-alive所緩存的頁面只會執行一次created和mounted，也就是在第一次進入才會執行。但是又會多兩個生命周期，分別是activated、deactivated，activated在每次進入執行而deactivated在每次離開前執行。當然有些頁面不需要緩存，就要進行一些處理，這里就不多講了，因為估計大家都知道(不知道網路去...)。

2.EventBus(事件匯流排)

EventBus用於實現組件之間的數據通訊，使用起來非常之簡單。只需要在main.js中加入以下代碼：

Vue.prototype.$eventBus = new Vue();

上面代碼就創建了一個全局EventBus，其實就是一個vue實例。

這樣我們就可以在各個頁面中使用了。

在頁面中使用 $emit 方法就可以觸發事件,然後組件中使用 $on 方法就可以監聽對應事件,這個和組件之間傳值是一樣的。不過這個可以在非父子組件中傳遞狀態,和vuex差不多。當然這種方法在簡單應用中可以使用，復雜的應用應該使用 vuex ，這樣方便管理和維護。
this.$eventBus.$emit('msg',data);// 觸發事件 this.$eventBus.$on('msg',(data)=>{}) // 監聽事件
3.組合使用

這兩個我感覺很配，當我們使用keep-alive緩存了頁面組件，我們需要在A面來觸發B頁面的列表刷新或其他方法時，這時候使用EventBus就非常方便，其他方法也可以，比如說使用vuex，但是此時就沒有直接使用EventBus方便快捷了。當我們在頁面中使用了 this.$eventBus.$on 去監聽一個事件，只要頁面被緩存，就可以監聽到其他頁面觸發的事件。這樣我們就可以減少一些不必要的請求，而且在需要更新的時候去更新，也可以做一些其他的操作，簡直美滋滋。

總結

以上所述是小編給大家介紹的vue的keep-alive中使用EventBus的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！
您可能感興趣的文章:基於vue中keep-alive緩存問題的解決方法詳解Vue的鉤子函數(路由導航守衛、keep-alive、生命周期鉤子)vue中keep-alive的用法及問題描述解決vue單頁使用keep-alive頁面返回不刷新的問題vue2中的keep-alive使用總結及注意事項vue項目優化之通過keep-alive數據緩存的方法vue使用keep-alive實現數據緩存不刷新Vue keep-alive實踐總結（推薦）深入理解vue-router之keep-alive

『拾』使用VUE開發的項目怎麼解決SEO問題最好

使用Vue，是js載入後台數據的，動態賦值在元素上的，搜索引擎只能抓取html內容並不能執行JS，這樣搜索引擎抓取不到數據。
解決方法：1、使用CDN緩存靜態文件；2、使用服務端對SEO部分進行動態賦值；3、prerender-spa-plugin預渲染插件

vue緩存使用說明書

與vue緩存使用說明書相關的內容