高级vue教程 源码分析

2020-03-19 10:05:21 浏览数 (2)

学习getter setter

代码语言：javascript复制
 function convert(obj) {
      Object.keys(obj).forEach(key => {
        let internalValue = obj[key]
        Object.defineProperty(obj, key, {
          get() {
            console.log(`getting key "${key}": ${internalValue}`)
            return internalValue
          },
          set(newValue) {
            console.log(`setting key "${key}" to: ${newValue}`)
            internalValue = newValue
          }
        })
      })
    }
代码语言：javascript复制
let student = {
      name: 'liuyi',
      age: 12,
      sex: 'female'
    }

    convert(student)
    Object.keys(student).forEach(key => {
      console.log('student.key', student[key]);
    })

    console.log('student.name', student.name);
    console.log('student.age', student.age);
    student.name = "xiaowang";
    student.age = student.age   1;
    console.log('student.name', student.name);

Plugins

Render Functions

Render Function API

代码语言：javascript复制
export default {
  render (h) {
    return h(‘div’,{},[…])
  }
}

The h function

h can directly render a component

做一个练习

代码语言：javascript复制
<example tags="['h1','h2','h3']"></example>
<script>

Vue.component('example',{
  props:['tags],
  render:(h){
    return h('div',this.tags.map((tag,i)=>h(tag,i)))
  }
});

new Vue({el:"#app"})
</script>

或者

代码语言：javascript复制
<example tags="['h1','h2','h3']"></example>
<script>
Vue.component('example',{
  functonal:true,
  render:(h,{props:{tags}}){
    return h('div',tags.map((tag,i)=>h(tag,i)))
  }
});

new Vue({el:"#app"})
</script>

另一个练习 Dynamically Render Components

代码语言：javascript复制
<div id="app">
 <example :ok="ok"></example>
 <button @click="ok = !ok">toggle</button>
</div>

<script>

const Foo = {
  render:h=>h('div','foo')
}

const Bar = {
  render:h=>h('div','bar')
}

Vue.component('example',{
  props:['ok'],
  render(h){
    return this.ok?h(Foo):h(Bar)
  }
})




new Vue({el:"#app",
data:{ok:true}})

</script>
api function getter plugins render

0 人点赞