집 > 기사 > 웹 프론트엔드 > 뷰 재구성 기술의 상세한 해석

뷰 재구성 기술의 상세한 해석

亚连원래의: 2018-06-09 17:59:481793검색

이 글에서는 주로 Vue 프로젝트 재구성 기술의 핵심 내용과 요약을 소개하고 참고하겠습니다.

머리말

요즘 너무 바빠서 블로그가 오랫동안 업데이트가 안됐어요. 오늘은 바쁜 일정을 쉬면서 최근 Vue 프로젝트 재구축의 기술적 포인트 몇 가지를 간략하게 요약하고 싶습니다.

vue 데이터가 업데이트되었지만 뷰가 업데이트되지 않았습니다.

이 문제가 자주 발생합니다. 일반적으로 vue 데이터가 할당되면 vue 데이터가 변경되지만 뷰가 업데이트되지 않습니다. 이것은 프로젝트 재구성의 기술적인 요점이 아닙니다. vue2.0의 일반적인 솔루션을 여러분과 공유하겠습니다!

해결책은 다음과 같습니다.

1. vue.set을 통해 값을 할당합니다.

Vue.set(数据源, key, newValue)

2. Array.prototype.splice 메서드를 통해

data source.splice(indexOfItem, 1, newValue)

3. data Length

Data source.splice(newLength)

4. Mutation Methods

Vue.js는 관찰된 배열의 변형 메소드를 래핑하여 뷰 업데이트를 트리거할 수 있습니다. 래핑된 메서드는 다음과 같습니다.

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

prop 객체 배열 애플리케이션

JavaScript에서 객체와 배열은 동일한 메모리 공간을 가리키는 참조 유형입니다. prop이 객체 또는 배열인 경우 하위 구성 요소 내에서 이를 변경하면 영향을 받습니다. 상위 구성 요소의 상태입니다. 이를 활용하여 자식 컴포넌트의 prop 배열이나 객체를 변경하면 부모 컴포넌트와 prop의 데이터가 적용되는 모든 위치가 변경됩니다. 이전에 js 딥 카피(deep copy)와 얕은 카피(shallow copy)에 대한 글을 쓴 적이 있습니다. 관심이 있으시면 실제로 원리는 동일합니다.

경우는 다음과 같습니다.

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

itemData가 적용되는 모든 곳이 변경됩니다!

Vue는 위의 prop을 변경할 때 콘솔에 경고를 표시하지 않습니다. prop에 값을 완전히 변경하거나 할당하면 콘솔에 경고가 표시됩니다! 공식 솔루션을 다음과 같이 인용합니다.

1. 로컬 변수를 정의하고 prop 값으로 초기화합니다.

props: [&#39;initialCounter&#39;],
data: function () {
 return { counter: this.initialCounter }
}

2. 계산된 속성을 정의하고 prop 값을 처리하고 반환합니다.

props: [&#39;size&#39;],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

v-model Some 함정

사실 v-model과 sync는 제가 이전에 기사에서 소개한 적이 있고, 공식 웹사이트에서도 비슷한 사례를 찾을 수 있습니다!

v-model 데이터는 정의되지 않은 경우 오류를 보고하지 않는 경우가 있으므로 v-model은 정의되지 않을 수 없다는 점에 유의하세요. 그렇지 않으면 설명할 수 없는 문제가 발생할 수 있습니다!

리팩토링 - 동적 구성 요소 생성

때로는 약간의 차이만 있는 유사한 구성 요소가 많이 있을 수 있으며 이러한 유사한 구성 요소를 구성 파일에 작성하고 해당 구성 요소를 동적으로 생성하고 참조할 수 있습니다.

방법 1: 구성 요소 및 is together

예약된 요소를 사용하고 is 속성을 동적으로 바인딩하면 동일한 마운트 지점에서 여러 구성 요소를 동적으로 전환할 수 있습니다.

var vm = new Vue({
 el: &#39;#example&#39;,
 data: {
 currentView: &#39;home&#39;
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

방법 2: 렌더링 방법 생성을 통해

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

bi.chart.comComponents[_type ]["attr"] 이는 구성 파일에서 동적으로 구성됩니다. 유형을 클릭하면 변경되고 다른 유형의 attr 속성이 사용됩니다.

공개 속성 추출

우리 프로젝트에서는 많은 상태나 데이터를 사용하는 경우가 많습니다. 많은 공개 데이터를 추출하여 나중에 이 데이터 개체의 변경 사항을 모니터링할 수 있습니다. 데이터를 저장하거나 얻습니다.

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

위의 깊이 모니터링을 사용할 수 있습니다. 초기화 도중 즉시 실행해야 한다면 즉시 실행 모니터링을 활용하면 됩니다!

require 동적 종속성 로드

요구 동기화 기능을 사용하여 코드에서 종속성을 동적으로 로드할 수 있습니다. 예를 들어 아래 echart 테마를 사용하면 전환을 클릭할 때 동적으로 로드할 수 있습니다!

require("echarts/theme/"+ data.theme);

가져오기 로딩은 헤드에 배치해야 합니다. 초기화 중에 기본 테마를 가져와서 로드할 수 있습니다!

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

뷰 재구성 기술의 상세한 해석

관련 기사