vue.jsページのロードはcreatedを実行して、mountedの順序は説明します。

8141 ワード
vue.js created mounted 順序
createdページを読み込む前に実行します。
mountedでレンダリングします。
createdは、htmlテンプレートの生産前にDomを操作できなくなりましたので、mountedは大丈夫です。
補足知識：Vueサブアセンブリdataオプションについて、ある属性はサブアセンブリpropsで定義されている属性を引用する何時に考えますか？
Vueを学んだことがあるのは、VueなどのMVMフレームが伝統的なJSライブラリ、例えばJqueryに対して最大の違いはデータ駆動ビューにあり、データを入手した後、データをテンプレート｛｝文法またはv−htmlによってページに展示しています。
Vue親子のコンポーネントがPropsを通じて親のコンポーネントをサブアセンブリに伝えることができることも知っています。
プロジェクト開発において、私達はこのような需要に出会います。ページ初期化の時、父のコンポーネントはインターフェースを通じて必要なデータを受け取り、その後得られたデータはpropsを通じてサブコンポーネントに伝えます。サブコンポーネントには、いくつかの業務上の動作が、受け入れられたprops値を変更することがある。
Vue中性子コンポーネントは直接props値を変更できないので、エラーが発生します。
親コンポーネントは、ワードコンポーネントの変更後の値をインターフェース要求パラメータの値として取得する必要があります。
このような需要を実現するために、私達は一般的にdataである属性を定義します。この属性はpropsのある値を引用します。その後、データを傍受し、このデータが変化した場合、カスタムイベントと変更後の値を親レベルのコンポーネントに転送する。

//    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>       </title>
</head>
<body>
  <div id="app">

    <h1>  template   ，#app       </h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

//                ，      
Vue.component('Parent', {
  template: `
    <div>
      <p>     </p>
      <Child :childDataA="msg"/>
     
    </div>
  `,
  data() {
    return {
      msg: '         '
    }
  },
  methods: {
    childHandler(val) {
      console.log(val)
    }
  }
})

Vue.component('Child', {
  template: `
    <div>
      <p>     </p>
      {{ childDataA }}
      <input type="text" v-model="childDataA" @input="changeValue">
    </div>
  `,
  //   props      ，             ，         
  props: {
    childDataA: {
      type: String,
      default: ''
    },
    childDataB: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      msgA: this.childDataA,
      msgB: this.childDataB
    }
  },
  methods: {
    changeValue() {
      this.$emit('childHandler', this.msg)
    }
  }
})

//       App
const App = {
  template: `
    <div>
      <Parent />
    </div>
  `
}
new Vue({
  el: '#app',
  data() {
    return {

    }
  },
  //      
  components: {
    App
  },
  //     
  template: '<App/>'
})
</script>
</html>
上のコードでは、サブアセンブリChildと親コンポーネントPartentが定義されており、サブアセンブリのinputボックスは、v−modelバインディングによって受け入れられたpropsのchildDataAであり、ページ初期化は以下の通りである。

テキストボックスに他の値を入力すると

props属性の直接変更を避けるように注意します。propsに基づいてdataまたは計算属性を定義します。
次はもう一つの状況を見ます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>       </title>
</head>
<body>
  <div id="app">

    <h1>  template   ，#app       </h1>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

//                ，      
Vue.component('Parent', {
  template: `
    <div>
      <p>     </p>
      <Child :childDataA="msg" :childDataB="msgB"/>
     
    </div>
  `,
  data() {
    return {
      msg: '         ',
      msgB: {
        name: '  name  '
      }
    }
  },
  methods: {
    
  },
  watch: {
    msg(val) {
      console.log(val)
    },
    msgB: {
      deep: true,
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  }
})

Vue.component('Child', {
  template: `
    <div>
      <p>     </p>
      {{ childDataA }}
      <input type="text" v-model="msgA">
      <input type="text" v-model="msgB.name">
    </div>
  `,
  //   props      ，             ，         
  props: {
    childDataA: {
      type: String,
      default: ''
    },
    childDataB: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      msgA: this.childDataA,
      msgB: this.childDataB
    }
  },
  methods: {
    
  },
  mounted() {
    console.log(`msgA     ${typeof this.msgA}`)
    console.log(this.childDataA === this.msgA)

    console.log(`msgB     ${typeof this.msgB}`)
    console.log(this.childDataB === this.msgB)

  }
})

//       App
const App = {
  template: `
    <div>
      <Parent />
    </div>
  `
}
new Vue({
  el: '#app',
  data() {
    return {

    }
  },
  //      
  components: {
    App
  },
  //     
  template: '<App/>'
})
</script>
</html>
ページ

元のタイプのmsgAと引用タイプの値msgBが受け入れられたprops値と厳密に等しいことが見られます。
テキストボックスの値を2つずつ変更します。

45行だけが変更されたname値をプリントアウトします。つまり、dataオプションのmsgAはpropsのchildDataAを参照してください。childDataAは元のタイプです。msgAが変わるとchildDataAは変わりません。つまり、父部品のmsgは変わりません。msgBはpropsのchildDataBを引用し、childDataAは参照タイプであり、msgBが変化してchild DataBが変化する。つまり、親のセットのdata選択型のmsgBが変化します。
Vueソースを深く追究しないでください。どのように具体的に実現したのですか？サブコンポーネントのmounted段階では、二つの値childDataA==msgA、child DataB==msgBが見られます。ここから値を得ることができます。父コンポーネントのmsgBとサブコンポーネントのpropsのchildDataBとdataのmsgBは同じ参照です。つまり、同じオブジェクトを参照します。属性値が変化すると、変化が発生します。元のタイプはありません。

ここでは実際にJSに拡張されているオリジナルのタイプと参照のタイプが等しい比較です。
元のタイプは同じ値であれば厳密に等しいです。文字列の作成値も同じです。
参照タイプの比較は参照の比較であり、メモリアドレスが同じであることが必要である。2つのオブジェクトの属性すなわち属性値が完全に同じである場合、参照が異なる（異なる）場合、この2つのオブジェクトは厳密には等しくない。

var a = 1
b = a
b // 1
b = 2
b // 2
a // 1

var objA = {name: 'A'}
var objB = objA
objB //{name: 'A'}
objB.name = 'B
objA.name // 'B'
上にこんなにたくさん話しましたが、何の役に立つでしょうか？実は私達は以下のいくつかのヒントを得られます。
実際の業務開発では、サブアセンブリが受け入れるprops属性値が変更された後、親コンポーネントdataオプションの値も値の変化を知る必要があります。このようなprops属性が複数存在する場合、私のオブジェクトを定義することができます。これにより、コンポーネント定義を繰り返し、親コンポーネントでカスタムイベントを受け入れ、論理処理を行うことができます。親コンポーネントdataの複数の属性の値を手動でカスタマイズイベントの許容値に変更します。
サブコンポーネントのpropsは、行列ではなくオブジェクト定義を使用することを推奨し、対象定義によって、受け入れられたタイプを検証することができる。
Jqにしても、Vueにしても、元のJSに基づいているので、元のJSを理解することが重要です。
以上のこのvue.jsページはcreatedをロードして実行して、mountedの先着順は小さい編集がみんなのすべての内容に分かち合うので、みんなに1つの参考をあげることができることを望んで、みんながよけいに私達を支持することをも望みます。
ハッカーが検出を避ける手段
vue props传染Aray/Objectタイプの値を解決して、サブアセンブリが間違っている場合