Vue 렌더링을 처음부터 사용하기

이번에는 Vue 렌더를 처음부터 사용하는 방법을 알려드리겠습니다. Vue 렌더를 처음부터 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

소개

Vue를 개발에 사용할 때 대부분 템플릿을 사용하여 개발하는 것은 간단하고 편리하며 빠르지만 때로는 특별한 시나리오에는 템플릿이 적합하지 않은 경우도 있습니다. 그래서 렌더 기능을 잘 활용하기 위해 좀 더 자세히 살펴보기로 했습니다. 아래에 쓴 내용이 잘못되었다고 생각하시면 지적해 주시기 바랍니다. 저와의 교류가 글을 쓰게 된 가장 큰 동기가 됩니다.

Scenario

공식 웹사이트에 설명된 시나리오 레벨 소품을 통해 제목 태그를 동적으로 생성하는 구성 요소를 작성하기 시작하면 다음과 같이 구현하는 것을 빨리 생각할 수 있습니다.

<script type="text/x-template" id="anchored-heading-template">
 <h1 v-if="level === 1">
  <slot></slot>
 </h1>
 <h2 v-else-if="level === 2">
  <slot></slot>
 </h2>
 <h3 v-else-if="level === 3">
  <slot></slot>
 </h3>
 <h4 v-else-if="level === 4">
  <slot></slot>
 </h4>
 <h5 v-else-if="level === 5">
  <slot></slot>
 </h5>
 <h6 v-else-if="level === 6">
  <slot></slot>
 </h6>
</script>

Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

이 시나리오에서 템플릿을 사용하는 것은 그렇지 않습니다. 최선의 선택: 우선 코드가 장황합니다. 다양한 수준의 제목에 앵커 요소를 삽입하려면 을 반복적으로 사용해야 합니다.

템플릿은 대부분의 구성 요소에서 훌륭하게 작동하지만 여기서는 그다지 깨끗하지 않습니다. 이제 렌더링 함수를 사용하여 위의 예를 다시 작성해 보겠습니다.

Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 标签名称
   this.$slots.default // 子组件中的阵列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

훨씬 더 간단하고 명확해졌습니다! 간단히 말해서 이 코드는 훨씬 간단하지만 Vue의 인스턴스 속성에 매우 익숙해야 합니다. 이 예에서는 고정 제목의 Hello world!와 같은 슬롯 속성을 사용하지 않고 구성 요소에 콘텐츠를 전달할 때 해당 하위 요소가 구성 요소 인스턴스의 $slots.default에 저장된다는 점을 알아야 합니다.

createElement 매개변수 소개

다음으로 숙지해야 할 것은 createElement 함수에서 템플릿을 생성하는 방법입니다. createElement에서 허용하는 매개변수는 다음과 같습니다.

createElement(
 // {String | Object | Function}
 // 一个 HTML 标签字符串，组件选项对象，或者
 // 解析上述任何一种的一个 async 异步函数，必要参数。
 'p',
 // {Object}
 // 一个包含模板相关属性的数据对象
 // 这样，您可以在 template 中使用这些属性。可选参数。
 {
  // (详情见下一节)
 },
 // {String | Array}
 // 子节点 (VNodes)，由 `createElement()` 构建而成，
 // 或使用字符串来生成“文本节点”。可选参数。
 [
  '先写一些文字',
  createElement('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

데이터 객체에 대한 심층 분석

한 가지 주의할 점: 템플릿 구문과 마찬가지로 v-bind:class 및 v-bind:style은 다음에서 특별히 처리됩니다. VNode 데이터 개체에서 다음 속성 이름은 최고 수준 필드입니다. 또한 이 객체를 사용하면 innerHTML과 같은 DOM 속성과 같은 일반 HTML 속성을 바인딩할 수 있습니다(이것은 v-html 지시어를 대체합니다).

{
 // 和`v-bind:class`一样的 API
 'class': {
  foo: true,
  bar: false
 },
 // 和`v-bind:style`一样的 API
 style: {
  color: 'red',
  fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
  id: 'foo'
 },
 // 组件 props
 props: {
  myProp: 'bar'
 },
 // DOM 属性
 domProps: {
  innerHTML: 'baz'
 },
 // 事件监听器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修饰器
 // 需要手动匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 仅对于组件，用于监听原生事件，而不是组件内部使用
 // `vm.$emit` 触发的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
 // 赋值，因为 Vue 已经自动为你进行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件，需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}

조건부 렌더링

이제 위 API에 익숙해졌으니 실용적인 전투를 해보겠습니다.

이전에는 이렇게 썼는데

//HTML
<p id="app">
  <p v-if="isShow">我被你发现啦！！！</p>
</p>
<vv-isshow :show="isShow"></vv-isshow>
//js
//组件形式      
Vue.component('vv-isshow', {
  props:['show'],
  template:'<p v-if="show">我被你发现啦2！！！</p>',
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

render는 이렇게 썼어요

//HTML
<p id="app">
  <vv-isshow :show="isShow"><slot>我被你发现啦3！！！</slot></vv-isshow>
</p>
//js
//组件形式      
Vue.component('vv-isshow', {
  props:{
    show:{
      type: Boolean,
      default: true
    }
  },
  render:function(h){  
    if(this.show ) return h('p',this.$slots.default);
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

List 랜더링

이전에도 이렇게 썼는데, v-for할 때는 템플릿을 라벨로 묶어야 해요

//HTML
<p id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</p>
//js
//组件形式      
Vue.component('vv-aside', {
  props:['list'],
  methods:{
    handelClick(item){
      console.log(item);
    }
  },
  template:'<p>\
         <p v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</p>\
       </p>',
  //template:'<p v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</p>',错误     
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

render는 이렇게 작성했습니다

//HTML
<p id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</p>
//js
//侧边栏
Vue.component('vv-aside', {
  render: function(h) {
    var _this = this,
      ayy = this.list.map((v) => {
        return h('p', {
          'class': {
            odd: v.odd
          },
          attrs: {
            title: v.txt
          },
          on: {
            click: function() {
              return _this.handelClick(v);
            }
          }
        }, v.txt);
      });
    return h('p', ayy);
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return this.list || [];
      }
    }
  },
  methods: {
    handelClick: function(item) {
      console.log(item, "item");
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

v-model

이전 작성 방법

//HTML
<p id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</p>
//js
//input
Vue.component('vv-models', {
  props: ['txt'],
  template: '<p>\
         <p>看官你输入的是:{{txtcout}}</p>\
         <input v-model="txtcout" type="text" />\
       </p>',
  computed: {
    txtcout:{
      get(){
        return this.txt;
      },
      set(val){
        this.$emit('input', val);
      }
      
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '', 
  }
});

render는 이렇게 작성했습니다

//HTML
<p id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</p>
//js
//input
Vue.component('vv-models', {
  props: {
    txt: {
      type: String,
      default: ''
    }
  },
  render: function(h) {
    var self=this;
    return h('p',[h('p','你猜我输入的是啥：'+this.txt),h('input',{
      on:{
        input(event){
          self.$emit('input', event.target.value);
        }
      }
    })] );
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '', 
  }
});

Summary

render 함수는 완벽한 프로그래밍 기능 성능면에서 절대적인 우위를 가지고 있는 JavaScript의 경우, 편집자는 그것을 분석할 뿐입니다. 실제 프로젝트의 경우 렌더링을 위해 어떤 방법을 선택해야 하는지는 프로젝트와 실제 조건에 따라 결정되어야 합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

json-server로 백엔드 데이터를 생성하는 방법

vuex 상태 관리 사용에 대한 자세한 설명

위 내용은 Vue 렌더링을 처음부터 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!