Vue 와 위 챗 애플 릿 의 차이 점,비교 분석

vue 프로젝트 와 애플 릿 을 작성 한 결과 이들 의 공통점 과 차이 점 을 정리 하고 자 합 니 다.
수명 주기
먼저 두 장의 그림 을 붙인다.
vue 수명 주기

애플 릿 라 이 프 사이클

이에 비해 애플 릿 의 갈고리 함 수 는 훨씬 간단 하 다.
vue 의 갈고리 함 수 는 새 페이지 를 뛰 어 넘 을 때 갈고리 함수 가 모두 촉발 되 지만 작은 프로그램의 갈고리 함수,페이지 의 서로 다른 점프 방식,촉발 하 는 갈고리 가 다르다.onLoad:페이지 불 러 오기
한 페이지 는 한 번 만 호출 됩 니 다.onLoad 에서 현재 페이지 를 여 는 query 인 자 를 가 져 올 수 있 습 니 다.
onShow:페이지 표시
페이지 를 열 때마다 한 번 씩 호출 합 니 다.
onReady:페이지 첫 렌 더 링 완료
한 페이지 는 한 번 만 호출 됩 니 다.페이지 가 준비 되 어 있 고 보기 층 과 상호작용 을 할 수 있 습 니 다.
wx.setNavigation BarTitle 과 같은 인터페이스 설정 은 onReady 이후 에 설정 하 십시오.생명 주 기 를 자세히 보다.
onHide:페이지 숨 기기
navigateTo 나 아래쪽 tab 를 전환 할 때 호출 합 니 다.
onUnload:페이지 마 운 트 해제
redirectTo 나 navigate Back 일 때 호출 합 니 다.
데이터 요청
페이지 에 요청 데 이 터 를 불 러 올 때 두 갈고리 의 사용 은 비슷 합 니 다.vue 는 보통 created 나 mounted 에서 데 이 터 를 요청 하고 애플 릿 에 서 는 onLoad 나 onShow 에서 데 이 터 를 요청 합 니 다.
2.데이터 바 인 딩
vue:vue 동적 으로 변수 값 을 요소 의 특정한 속성 으로 연결 할 때 변수 앞 에 콜론 을 추가 합 니 다.예:

<img :src="imgSrc"/>

애플 릿:특정한 변수의 값 을 요소 속성 으로 연결 할 때 두 개의 큰 괄호 로 묶 습 니 다.괄호 를 넣 지 않 으 면 문자열 로 여 겨 집 니 다.예:

<image src="{{imgSrc}}"></image>

3.리스트 렌 더 링
코드 를 직접 붙 이 는 것 도 비슷 합 니 다.
vue：

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})

애플 릿:

Page({
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})

<text wx:for="{{items}}">{{item}}</text>

4.디 스 플레이 와 숨겨 진 요소
vue 에 서 는 v-if 와 v-show 제어 요소 의 표시 와 숨 김 을 사용 합 니 다.
애플 릿 에 서 는 wx-if 와 hidden 제어 요 소 를 표시 하고 숨 깁 니 다.
5.사건 처리
vue:v-on:event 바 인 딩 사건 을 사용 하거나@event 바 인 딩 사건 을 사용 합 니 다.예 를 들 어:

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //      

애플 릿 에 서 는 모두 bindtap(bindtap+event)또는 catchtap(catch+event)으로 사건 을 연결 합 니 다.예 를 들 어:

<button bindtap="noWork">     </button>
<button catchtap="noWork">     </button> //      

6.데이터 양 방향 연결
1.설정 값
vue 에 서 는 폼 요소 에 v-model 을 더 한 다음 에 data 에 대응 하 는 값 을 연결 해 야 합 니 다.폼 요소 의 내용 이 변화 할 때 data 에 대응 하 는 값 도 상응 하 게 변 합 니 다.이것 은 vue 가 매우 좋 은 점 입 니 다.

<div id="app">
 <input v-model="reason" placeholder="    " class='reason'/>
</div>

new Vue({
 el: '#app',
 data: {
 reason:''
 }
})

하지만 애플 릿 에는 이런 기능 이 없다.그럼 어 떡 하지?
폼 내용 이 바 뀌 었 을 때 발표 단일 요소 에 연결 하 는 방법 을 건 드 린 다음 이 방법 에서 this.setData({key:value})를 통 해 폼 의 값 을 data 의 대응 값 에 할당 합 니 다.
다음은 코드 입 니 다.느껴 보 세 요.

<input bindinput="bindReason" placeholder="    " class='reason' value='{{reason}}' name="reason" />

Page({
data:{
 reason:''
},
bindReason(e) {
 this.setData({
  reason: e.detail.value
 })
 }
})

페이지 폼 요소 가 많 을 때 값 을 바 꾸 는 것 은 육체 적 인 일이 다.애플 릿 과 비교 해 보면 vue 의 v-model 은 정말 시원 하 다.
2.수치
vue 에서 this.reason 을 통 해 값 을 추출 합 니 다.
애플 릿 에서 this.data.reason 을 통 해 값 을 추출 합 니 다.
7.귀속 이벤트 전 참
vue 에서 귀속 이벤트 의 전 참 은 매우 간단 하 다.이 벤트 를 촉발 하 는 방법 에서 전달 해 야 할 데 이 터 를 형 참 으로 전송 하면 된다.예 를 들 어:

<button @click="say('     ')"></button>

new Vue({
 el: '#app',
 methods:{
 say(arg){
 consloe.log(arg)
 }
 }
})

작은 프로그램 에 서 는 사건 을 연결 하 는 방법 에서 파 라 메 터 를 직접 전달 할 수 없습니다.파 라 메 터 를 속성 값 으로 하고 요소 의 data-속성 에 연결 한 다음 에 방법 에서 e.currentTarget.dataset.*방식 으로 가 져 와 서 매개 변수 전달 을 완성 해 야 합 니 다.있 습 니까?

<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
 reason:''
},
toApprove(e) {
 let id = e.currentTarget.dataset.id;
 }
})

8.부자 구성 요소 통신
1.하위 구성 요소 의 사용
vue 에서 필요:
1.하위 구성 요소 작성
2.사용 할 부모 구성 요소 에서 import 를 통 해 도입
3.vue 의 components 에 등록
4.템 플 릿 에서 사용

//    bar.vue
<template>
 <div class="search-box">
 <div @click="say" :title="title" class="icon-dismiss"></div>
 </div>
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:''
  }
 }
},
methods:{
 say(){
  console.log('     ');
  this.$emit('helloWorld')
 }
}
</script>

//     foo.vue
<template>
 <div class="container">
 <bar :title="title" @helloWorld="helloWorld"></bar>
 </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data:{
 title:"    "
},
methods:{
 helloWorld(){
  console.log('             ')
 }
},
components:{
 Bar
}
</script>

애플 릿 에서 필요:
1.하위 구성 요소 작성
2.하위 구성 요소 의 json 파일 에서 이 파일 을 구성 요소 로 설명 합 니 다.

{
 "component": true
}

3.도입 해 야 할 부모 구성 요소 의 json 파일 에서 usingComponents 에서 도입 구성 요소 의 구성 요소 이름과 경 로 를 작성 합 니 다.

"usingComponents": {
 "tab-bar": "../../components/tabBar/tabBar"
 }

4.부모 구성 요소 에서 직접 도입 하면 됩 니 다.

<tab-bar currentpage="index"></tab-bar>

구체 적 인 코드:

//    
<!--components/tabBar/tabBar.wxml-->
<view class='tabbar-wrapper'>
 <view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'>
 <text class='iconfont icon-shouye'></text>
 <view>  </view>
 </view>
 <view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'>
 <text class='iconfont icon-shezhi'></text>
 <view>  </view>
 </view>
</view>

2.부자 구성 요소 간 통신
vue 에서
부모 구성 요 소 는 하위 구성 요소 에 데 이 터 를 전달 합 니 다.하위 구성 요소 가 v-bind 를 통 해 하나의 값 을 전달 해 야 합 니 다.하위 구성 요소 에 서 는 props 를 통 해 데 이 터 를 전달 할 수 있 습 니 다.예제:

//     foo.vue
<template>
 <div class="container">
 <bar :title="title"></bar>
 </div>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
 title:"    "
},
components:{
 Bar
}
</script>

//    bar.vue
<template>
 <div class="search-box">
 <div :title="title" ></div>
 </div>
</template>
<script>
export default{
props:{
 title:{
  type:String,
  default:''
  }
 }
}
</script>

하위 구성 요소 와 부모 구성 요소 의 통신 은 this.$emit 를 통 해 부모 구성 요소 에 방법 과 데 이 터 를 전달 할 수 있 습 니 다.
애플 릿 에서
부모 구성 요소 가 하위 구성 요소 에 통신 하 는 것 은 vue 와 유사 하지만 애플 릿 은 v-bind 를 통 해 값 을 변수 에 직접 할당 하지 않 았 습 니 다.다음 과 같 습 니 다.

<tab-bar currentpage="index"></tab-bar>
  ， “index”           

하위 구성 요소 properties 에서 전 달 된 값 을 받 습 니 다.

properties: {
 //     
 currentpage: {   //    
  type: String,  //   （  ），         ：String, Number, Boolean, Object, Array, null（      ）
  value: 'index'  //      （  ），               
 }
 }

하위 구성 요소 가 부모 구성 요소 에 통신 하 는 것 도 vue 와 유사 합 니 다.코드 는 다음 과 같 습 니 다.

//    
methods: { 
 //       
 cancelBut: function (e) {
  var that = this;
  var myEventDetail = { pickerShow: false, type: 'cancel' } // detail  ，         
  this.triggerEvent('myevent', myEventDetail) //myevent       ，      
 },
}

//    
<bar bind:myevent="toggleToast"></bar>

//        
toggleToast(e){
 console.log(e.detail)
}

부모 구성 요소 가 하위 구성 요 소 를 호출 하 는 방법
vue 는 하위 구성 요소 에 ref 속성 을 추가 합 니 다. this.$refs.ref의 값 을 통 해 이 하위 구성 요 소 를 얻 을 수 있 습 니 다.그리고 하위 구성 요소 의 임의의 방법 을 호출 할 수 있 습 니 다.예 를 들 어:

//   
<bar ref="bar"></bar>

//   
this.$ref.bar.      

애플 릿 은 하위 구성 요소 에 id 나 class 를 추가 한 다음 this.selectComponent을 통 해 하위 구성 요 소 를 찾 은 다음 하위 구성 요 소 를 호출 하 는 방법 입 니 다.예제:

//   
<bar id="bar"></bar>

//    
this.selectComponent('#id').syaHello()

애플 릿 과 vue 는 이 점 에서 너무 비슷 해서 나무 가 있다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 와 위 챗 애플 릿 의 차이 점,비교 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!