VUE 핵심 이슈 요약

이 글은 VUE의 중요하고 어려운 점을 요약하고, 관심 있는 친구들이 참고할 수 있도록 코드를 자세히 공유합니다.

1. 구성요소의 세 가지 장착 방법

자동 장착

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

수동 장착

// 可以实现延迟按需挂载
<p id="app"> {{name}} </p> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: &#39;张三&#39;} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }

// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: &#39;<p>{{message}}</p>&#39;, 
 data: function () { 
 return { 
  message: &#39;message&#39;
  } 
 } 
 }) 
 new app().$mount(&#39;#app&#39;) // 创建 app实例，并挂载到一个元素上

2. 라우팅을 통해 매개변수를 전달하는 방법: h =>

render:h=>h(App)는 ES6의 화살표 함수 작성 방법으로, render:function(h){return h(App);}과 동일합니다.1. this는 이것을 래핑하는 함수 외부의 객체를 가리킵니다.

2.h는 vue 생태계의 일반 관리인 creatElement의 별칭입니다.

3.template:'6869895f5d1da417a80af13d85b70d77', Components:{App} 함께 단독으로 사용됨 render:h=>h( App )은 동일한 효과를 얻습니다

전자는 d477f9ce7bf77f53fbcf36bec1b69b7a 태그를 식별하고, 후자는 템플릿 아래의 ID를 앱의 p로 직접 구문 분석합니다(템플릿의 존재를 무시함)

<p>
  <!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:&#39;/login&#39;,params: {isLogin: true}} -->
  <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: &#39;/login&#39;, query: {isLogin : true}}); -->
  <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: true}}">亲，请登录</router-link>
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: false}}">免费注册</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

4. of Vue.nextTick()

DOM 관련 작업은 DOM이 렌더링되었는지 확인하기 위해 이 함수의 콜백에 작성됩니다. nextTick의 출처:

VUE의 데이터 기반 뷰 업데이트로 인해 비동기식입니다. 즉, 데이터가 수정되면 뷰가 즉시 업데이트되지 않지만 뷰를 균일하게 업데이트하기 전에 동일한 이벤트 루프의 모든 데이터 변경이 완료될 때까지 기다립니다.

nextTick 트리거 타이밍:

동일한 이벤트 루프에서 데이터가 변경된 후 DOM은 업데이트를 완료하고 nextTick(콜백)의 콜백이 즉시 실행됩니다.

응용 시나리오:

뷰가 업데이트된 후 새 뷰를 기반으로 작동해야 합니다.

Vue 라이프사이클의 Created() 후크 함수에서 수행되는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다. 그 이유는 create() Hook 함수가 실행될 때 실제로 DOM이 전혀 렌더링되지 않고, 이때의 DOM 작업이 헛되기 때문에 DOM 작업을 위한 js 코드를 Vue에 넣어야 하기 때문입니다. nextTick()의 콜백 함수에서. 이에 대응하는 것이 탑재된 Hook 함수인데, 이 Hook 함수가 실행되면 모든 DOM 탑재 및 렌더링이 완료되므로 이 Hook 함수에서 DOM 작업을 수행하는 데에는 문제가 없습니다.

데이터 변경 후 작업을 수행해야 하고, 이 작업에 데이터 변경에 따라 변경되는 DOM 구조를 사용해야 하는 경우 이 작업을 Vue.nextTick()의 콜백 함수에 넣어야 합니다.

이벤트 루프에 대한 간략한 요약:

동기 코드 실행 -> 비동기 큐를 찾아 실행 스택에 푸시하고 콜백1을 실행합니다. [이벤트 루프 1] -> 실행 스택, callback2 실행 [이벤트 루프] 2]...즉, 각 비동기 콜백은 결국 자체적인 독립 이벤트 루프를 형성합니다. nextTick의 기원과 결합하여 각 이벤트 루프에서 nextTick이 트리거되는 타이밍을 추론할 수 있습니다.

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

단위 테스트 및 E2E 테스트에 Angular CLI를 사용하는 방법

빌드 및 서비스에 Angular CLI를 사용하는 방법에 대한 자세한 설명

Angular CLI를 사용하여 경로를 생성하는 방법

위 내용은 VUE 핵심 이슈 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!