ライフサイクル
Vue ライフサイクルの主な段階: 4 前、4 後、作成、ロード、更新、破棄
次の言葉を忘れずに言ってください。
最初の 4 つのライフサイクル フック関数を初めて実行します。
テンプレートはマウント時にレンダリングされます。
親コンポーネントと子コンポーネントのライフサイクル順序 (最初の 3 つは親コンポーネント、最初の 4 つは子コンポーネント、4 番目は親コンポーネント)
// 生命周期/* */
// 初始化阶段（不常用），拿不到data中的数据
beforeCreate() {
// 创建实例前
},
created() {
// 发送ajax请求，获取数据，赋值data，渲染
},
// 挂载阶段
beforeMount() {
},
// 可以拿到dom元素，进行性dom操作
mounted() {
},
// 更新阶段 （触发它的更新，数据变化，dom元素新增或者删除）
beforeUpdate() {
},
updated() {
},
// 销毁阶段
// vue2:::
// beforeDestroy(){
// },
// destroyed(){
// }
// vue3:::
// 这两个钩子函数需要 触发页面的才可以看到执行
// 可以在这个阶段，清除定时器，或者一些全局的函数
// 想看到效果，需要销毁这个组件， 可以在父组件中销毁这个组件
beforeUnmount() {
},
unmounted() {
}計算済み:{} 計算済み属性 (合計価格 +-*/)
-
// データ内のデータ処理のための複雑なロジックを処理します (メソッドのように見え、属性のように使用され、属性を計算します)
-
計算属性は、最初のデータの処理後に処理結果をキャッシュし、依存するデータが変更されない限り、将来の使用のためにキャッシュから読み取られます。
-
計算されたプロパティはキャッシュされ、メソッドは呼び出されている限り実行されます (計算されたプロパティによりパフォーマンスが節約されます)。
-
読み取り可能かつ変更不可、設定は変更可能かつ読み取り可能
//1.只能读，不能写
computed:{
revserMsg(){
console.log('烦死了');
return this.msg.split('').reverse().join('')
}
}
//2.这样写，可读可写
get **必选**:会在计算属性再第一次被调用或者是在依赖的数据改变之后会自动执行
并且返回一个处理好的结果
set **可选**:set里面必须有一个形参 这个形参就是计算属性修改之后的值
什么时候被调用:就是再计算属性处理好的值 被修改的时候调用
computed: {
// 这样写，可读不可写
// fullName(){
// return
// }
// 这样写，可读可写
fullName:{
get(){
return this.first+this.las
},
set(val){
console.log(val);
this.first = val.split('')[0]
this.las = val.split('')[1]
}
}
}watch: {} リスナー: データ内のデータをリッスンし、データ データが変更されると、何らかのロジックを実行するトリガーになります。
-
使用シナリオ:データ変更時に非同期操作または負荷の高い操作を実行します。
-
Watch はキャッシュをサポートしていません。対応するプロパティが変更されると、応答が実行されます。
-
データ内のデータ変更をリッスンするには、watch を使用します。watch の属性は、この段階でデータ内にすでに存在するデータである必要があります。
-
简写： watch:{ 你要监听的data数据(newval，oldval){ 你的逻辑 } }
1. ハンドラメソッドで監視しているデータが変化した際に実行されるコールバック関数
2. ウォッチは最初のロードではトリガーされません。トリガーしたい場合は、immediate 属性を使用して最初のロード モニターを有効にする必要があります。
3 と、デフォルトではウォッチはオブジェクトのプロパティの変更を監視しません。オブジェクトのプロパティの変更を監視したい場合は、 deep を使用できます。
//监听器watch使用
<div id="app">
<!-- <input type="text" v-model="firsttext">
+
<input type="text" v-model="secondtext">
=
{
{sumtext}} -->
<input type="text" v-model="user.firsttext">
+
<input type="text" v-model="user.secondtext">
=
{
{user.sumtext}}
</div>
</html>
<script src="./lib/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
// firsttext:'',
// secondtext:'',
// sumtext:''
user: {
firsttext: '哈',
secondtext: '黑',
sumtext: ''
}
}
},
watch: {
// // 简单写法（侦听器：侦听属性）
// 1.
// firsttext: function (newval,oldval) {
// this.sumtext = newval + this.secondtext
// console.log(this.newval);
// },
// secondtext: function(newval,oldval){
// this.sumtext = this.firsttext + newval
// }
// 2.打点写法，层次多麻烦
// 'user.firsttext':function(newval,oldval){
// this.user.sumtext = newval + this.user.secondtext
// },
// 'user.secondtext':function(newval , oldval){
// this.user.sumtext = this.user.firsttext + newval
// }
// 复杂写法（深层侦听器：懒执行，添加立即执行即可解决）
user: {
// 开启深层监听器
deep: true,
// 强制回调函数立即执行
immediate: true,
// handler监听的数据改变的时候执行的回调函数
handler(newval,oldval){
this.user.sumtext = newval.firsttext + newval.secondtext
}
}
}
}).mount('#app')
</script>フィルター: {} フィルター: 一部のデータを処理します(V3 にはありません。計算されたプロパティは置き換えることができます)
部分フィルター: 元のデータを変更せずにコンテンツをフォーマットして表示しますが、独自の範囲内のデータにのみ影響します。
<div id="app">
<!-- {
{ data数据 | 过滤器名}} -->
{
{time | newTime}}<br>
<!-- {
{ data数据 | 过滤器名(传递的值可以多个)}} -->
{
{msg | newMsg(' --- ','爱')}}<br>
<!-- {
{ data数据 | 过滤器名(传递的值可以多个) | 对前边的数据操作}} -->
{
{ msg | newMsg(' --- ','爱') | newNewMsg }}
</div>
<script src="./lib/vue.js"></script>
<!-- <script src="./lib/vue.global.js"></script> -->
<script>
let app = new Vue({
data() {//数据
return {
time: 1314521,
msg: 'hello world'
}
},
methods: {//方法
},
computed: {//计算属性
},
watch: {//侦听器
},
filters: {//过滤器
newTime(val) {// 传进的前一个值。默认值val
// 将时间戳转换成日期对象,转换成日期对象
return new Date(val).toLocaleString()
},
// newMsg(){
// return '哈哈哈哈哈'
// }，
newMsg(val) {
return val.split('').reverse().join('')
},
newMsg(val,x,y) {//val是默认的，是你处理的元素，x是reverseMsg的参数...val后可传递多个
return val.split('').reverse().join(x)+y
},
newNewMsg(){
return '哈哈哈哈哈'
}
},
compontent: {//全局组件
compontents: {//局部组件：带s
}
}
})
app.$mount("#app")
</script>グローバル フィルター: 元のデータを変更せずにコンテンツの書式設定と表示を行うと、現在のプロジェクト内のすべての位置データに対して有効になります。
// 全局过滤器filter
// Vue.filter("过滤器的名字",(你要过滤器的数据)=>{
// return 你的逻辑
// })
Vue.filter("xiaoming",(val)=>{
if(val.length>3){
return val.substr(0,3)+"..."
}else{
return val
}
})v-for および仮想 dom および diff アルゴリズム
-
v-forデフォルトの動作では、要素を再作成するのではなく、その場で要素を変更しようとします (インプレース更新)。-
dom の操作方法: 新しい仮想 DOM 構造をサイクルアウトし、古い仮想 DOM 構造と比較し、タグを再利用してコンテンツを所定の位置に更新します。
-
-
仮想ドーム
-
実際、これは実際の DOM を抽象化したレイヤーにすぎません。ツリーは JavaScript オブジェクト (VNode ノード) に基づいており、オブジェクトのプロパティはノードを記述するために使用されます。最後に、ツリーを実際の DOM にマッピングできます。一連の作業を通じて環境を整える
-
利点: DOM 更新のパフォーマンスが向上し、実際の DOM の操作頻度が低くなり、メモリ内の変更された部分を見つけて、実際の DOM を更新 (パッチ) します。
DOM は非常に遅く、その要素は非常に大きく、ページのパフォーマンスの問題のほとんどは、DOM 操作によって引き起こされる実際の DOM ノードによって引き起こされます。最も単純な div にも多くの属性が含まれています。
DOM の運用コストは依然として高く、頻繁な操作では依然としてページのフリーズが発生し、ユーザー エクスペリエンスに影響を与えるため、仮想 dom を使用してください。
-
実装のアイデア: Vue のすべてのオブジェクトのコンテキスト (属性の意味) オプションは Vue インスタンスを指すため、Vue では、#app テンプレート内のタグは、実際の DOM オブジェクトにレンダリングして表示される前に、Vue によって仮想 DOM オブジェクトに処理される必要があります。 DOMページ
-
-
差分アルゴリズム
-
diff アルゴリズムは新旧の仮想 DOM をどのように比較しますか?:
-
-
ピア比較
-
ルート要素が変更されました: DOM ツリーを削除して再構築します
-
ルート要素は変更されていませんが、属性は変更されています: DOM は再利用され、属性のみが更新されます
-
v-for には key=" " がありますか?
-
仮想 DOM の一意の識別子
-
キーがない場合、v-for はインプレース更新を最大化し、同じタイプの要素を再利用します。
-
key 属性を使用すると、diff アルゴリズムはキー値に従って比較します。これは直接挿入と同等であり、更新効率が向上します。
-
-