Vue.jsの計算属性、監視属性とライフサイクルの詳細
前言
この章では、Vueの中の二つの非常に重要な計算属性、監視属性とライフサイクルについて説明します。
属性を計算
属性の紹介を計算します
テンプレートの中で直接に補間文法でデータを表示できます。データを変換したり計算したりする必要がある場合があります。computtedオプションを使って計算してもいいです。この時、いくつかの小さな仲間が聞きます。直接関数を定義して再調整すればいいです。なぜまだ計算属性を整えなければならないですか？この問題は下で説明します。まず属性の計算を見てみます。
入門ケース
需要
人の姓と名をつづり合わせる
コード
価格の統計事例
コード
紹介する
属性の計算の完全な書き方は、getterとsetterの方法が含まれています。fullNameオブジェクトを宣言します。私たちは通常値を取るだけですので、上記のケースを省略します。データを取得する時にgetメソッドを呼び出して、データを設定する時にset方法を使います。
コード
ここでは上のmethodsとcomputedの違いについて答えます。下のコードは補間文法、methods、計算属性を使ってデータをレンダリングします。
コード
結論 methodsとcomputedは全部私達の機能を実現することができます。 属性を計算するとキャッシュされます。複数回使用すると、計算属性は一回だけ呼び出しられます。
属性の監視
概要
指定されたデータの変換をウォッチでモニターし、さらに対応する論理処理データを呼び出します。
コード
待ち受け属性は、属性コードを計算するよりも多く、属性を計算するにはデータを計算するだけでいいです。一方、待ち受け属性は各データの変化を監視する必要があります。
Vueライフサイクル
下図は実例のライフサイクルを示しています。すべてをすぐに知る必要はありませんが、勉強して使うにつれて、その参考価値はますます高くなります。
ライフサイクルは大きく分けて3段階の初期化段階、更新段階、死亡段階に分けられます。
初期化段階
この段階はnew Vueの例で呼び出し、一回だけ呼び出します。
beforeCreate：作成前に関数を呼び出します。
created：作成後に関数を呼び出します。
その後、マウントとテンプレートのレンダリングを行います。
before Mount：マウント前に操作し、選択したラベルを交換します。
マウント完了、データがブラウザに表示されます。
更新段階
データが変化した時にこの段階に入ると、頻繁に呼び出します。
beforeUpdate：データが修正されたときにトリガする
udated：仮想DOMが修正された後、つまりデータ修正後に呼び出します。
死亡の段階
死亡時も一回だけ呼び出します。
before Destroy：廃棄前
destroyed：廃棄
サンプルコードは以下の通りです
全体的にはcreated、mounted、before Destroyがよく使われています。 created、mounted：ajax要求を送信し、タイマーなどの非同期タスクを起動する before Destroy：仕上げ作業をする、例えば：タイマーをクリアする 
締め括りをつける
ここで、Vue.jsで属性を計算し、属性とライフサイクルを監視する文章を紹介します。Vueの計算属性、監視属性とライフサイクルの内容については、以前の文章を検索してください。また、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。
この章では、Vueの中の二つの非常に重要な計算属性、監視属性とライフサイクルについて説明します。
属性を計算
属性の紹介を計算します
テンプレートの中で直接に補間文法でデータを表示できます。データを変換したり計算したりする必要がある場合があります。computtedオプションを使って計算してもいいです。この時、いくつかの小さな仲間が聞きます。直接関数を定義して再調整すればいいです。なぜまだ計算属性を整えなければならないですか？この問題は下で説明します。まず属性の計算を見てみます。
入門ケース
需要
人の姓と名をつづり合わせる
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- -->
<p>{{fastName}} {{lastName}}</p>
<!-- -->
<p>{{fastName + " " + lastName}}</p>
<!-- -->
<p v-text="fullName2()"></p>
<!-- -->
<p>{{fullName1}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
fastName: "Tracy",
lastName: "McGrady"
},
computed: {
fullName1: function(){
return this.fastName + " " + this.lastName
}
},
methods: {
fullName2: function(){
return this.fastName + " " + this.lastName
}
}
})
</script>
</html>
価格の統計事例
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{totalPrice}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
bookes: [
{id: 100,name: 'Unix ',price: 119},
{id: 200,name: 'Java ',price: 105},
{id: 300,name: ' ',price: 98},
{id: 400,name: 'Spring5',price: 99},
]
},
computed: {
totalPrice: function(){
let result = 0;
//
/* for(let i = 0;i < this.bookes.length;i++){
result += this.bookes[i].price;
} */
// for ，i
/* for(let i in this.bookes){
result += this.bookes[i].price;
} */
// ES6 for
for(let book of this.bookes){
result += book.price
}
return result;
}
}
})
</script>
</html>
紹介する
属性の計算の完全な書き方は、getterとsetterの方法が含まれています。fullNameオブジェクトを宣言します。私たちは通常値を取るだけですので、上記のケースを省略します。データを取得する時にgetメソッドを呼び出して、データを設定する時にset方法を使います。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{fullName}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
firstName: "Tracy",
lastName: "McGrady"
},
//
computed: {
//
fullName:{
//
set: function(){
console.log('---');
},
//
get: function(){
return this.firstName + " " + this.lastName;
}
}
}
})
</script>
</html>
ここでは上のmethodsとcomputedの違いについて答えます。下のコードは補間文法、methods、計算属性を使ってデータをレンダリングします。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- ， ， -->
<p> ：{{name}} ：{{job}}</p>
<!-- methods ， -->
<p>{{getInfo1()}}</p>
<p>{{getInfo1()}}</p>
<p>{{getInfo1()}}</p>
<p>{{getInfo1()}}</p>
<!-- computed ， ， ， -->
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
<p>{{getInfo2}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
name: " ",
job: "NBA "
},
methods: {
getInfo1: function(){
console.log("methods");
return " ：" + this.name + " ： " + this.job;
}
},
computed: {
getInfo2: function(){
console.log("computed");
return " ：" + this.name + " ： " + this.job;
}
}
})
</script>
</html>
結論
概要
指定されたデータの変換をウォッチでモニターし、さらに対応する論理処理データを呼び出します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
<input type="text" v-model="fullName" />
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
firstName: "A",
lastName: "B",
fullName: "AB"
},
//
watch: {
firstName(value) {
this.fullName = value + this.lastName
},
lastName(value) {
this.fullName = this.firstName + value
}
}
})
</script>
</html>
待ち受け属性は、属性コードを計算するよりも多く、属性を計算するにはデータを計算するだけでいいです。一方、待ち受け属性は各データの変化を監視する必要があります。
Vueライフサイクル
下図は実例のライフサイクルを示しています。すべてをすぐに知る必要はありませんが、勉強して使うにつれて、その参考価値はますます高くなります。
ライフサイクルは大きく分けて3段階の初期化段階、更新段階、死亡段階に分けられます。
初期化段階
この段階はnew Vueの例で呼び出し、一回だけ呼び出します。
beforeCreate：作成前に関数を呼び出します。
created：作成後に関数を呼び出します。
その後、マウントとテンプレートのレンダリングを行います。
before Mount：マウント前に操作し、選択したラベルを交換します。
マウント完了、データがブラウザに表示されます。
更新段階
データが変化した時にこの段階に入ると、頻繁に呼び出します。
beforeUpdate：データが修正されたときにトリガする
udated：仮想DOMが修正された後、つまりデータ修正後に呼び出します。
死亡の段階
死亡時も一回だけ呼び出します。
before Destroy：廃棄前
destroyed：廃棄
サンプルコードは以下の通りです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-show="isShow">{{message}}</p>
<p>{{isShow}}</p>
<button type="button" @click="destroyVM"> </button>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
message: " ",
isShow: true
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("create");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
//
this.intervald = setInterval(()=>{
console.log("-------"+this.isShow);
this.isShow = !this.isShow;
},1000)
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
//
clearInterval(this.intervald)
},
destroyed() {
console.log("destroyed");
},
methods: {
// vm
destroyVM() {
//
this.$destroy()
}
}
})
</script>
</html>
全体的にはcreated、mounted、before Destroyがよく使われています。
締め括りをつける
ここで、Vue.jsで属性を計算し、属性とライフサイクルを監視する文章を紹介します。Vueの計算属性、監視属性とライフサイクルの内容については、以前の文章を検索してください。また、下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。