vue3.0之旅，每段代码用最新版vue 3.0.0-rc.2验证实操

1、实际运行一个简单项目，参考链接 掘金上一篇文章；
按上面的步骤，下载了代码并实际运行了，运行过程中发现需要把原文中Vue.createApp().mount(App, '#app')改为Vue.createApp(App).mount('#app')，以上修改已经提交到github：https://github.com/pineappleok/vue-next；
2、双向绑定的demo；

const { reactive } = Vue
var App = {
  template: `
    <div class="container">
         {{message}}
         <input v-model="name" />
         <p>{{name}}</p>
    </div>`,
  setup() {
    const state = reactive({
      message: 'Hello World!!!',
      name: ''
    })
    return {
      ...state
    }
  }
}
Vue.createApp(App).mount('#app')

3、子组件props、context参数；

const { reactive } = Vue
let Child = {
  // 属性定义
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  template: `<div>{{title}}</div>`,
  setup(props, context) {
    console.log(props);
    console.log(context);
  }
}
let App = {
  template: `
    <div class="container">
         {{message}}
         <input v-model="name" />
         <p>{{name}}</p>
         <Child title="test props two arguments"/>
    </div>`,
  components: { Child },
  setup() {
    const state = reactive({
      message: 'Hello World!!!',
      name: ''
    })
    return {
      ...state
    }
  }
}
Vue.createApp(App).mount('#app')

4、计数器 demo，toRefs的使用，

const { reactive, toRefs } = Vue
let Child = {
  // 属性定义
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  template: `<div>{{title}}</div>`,
  setup(props, context) {
    console.log(props)
    console.log(context)
  }
}
let App = {
  template: `
    <div class="container">
         {{message}}
         <input v-model="name" />
         <p>{{name}}</p>
         <Child title="test props two arguments"/>
         <h4>计数器 demo</h4>
         count: {{count}}
         <button @click="handlerCountAdd"> Click ++ </button>
    </div>`,
  components: { Child },
  setup() {
    const state = reactive({
      message: 'Hello World!!!',
      name: '',
      count: 0
    })
    const handlerCountAdd = () => {
      state.count++
    }
    return {
      ...toRefs(state),
      handlerCountAdd
    }
  }
}
Vue.createApp(App).mount('#app')

注意区别2双向绑定demo跟4计数器demo的区别，双向绑定demo的时候，其实不需要专门给name做toRefs处理，但是到计数器demo时，如果不给count做toRefs处理，那么可以在handlerCountAdd方法中打印得到最新的state中count已经递增，但是dom没有渲染出最新的count出来，还是显示count最原始的值0。

5、computed的引入与使用——反转字符串demo

const { reactive, toRefs, ref, computed } = Vue
let Child = {
  // 属性定义
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  template: `<div>{{title}}</div>`,
  setup(props, context) {
    console.log(props)
    console.log(context)
  }
}
let App = {
  template: `
    <div class="container">
         {{message}}
         <input v-model="name" />
         <p>{{name}}</p>
         <Child title="test props two arguments"/>
         <h4>计数器 demo</h4>
         count: {{count}}
         <button @click="handlerCountAdd"> Click ++ </button>
         <h4>ref使用:{{refExample}}</h4>  
         <h4>反转字符串demo</h4>
         <p>{{name}}反转后为：{{rName}}</p>       
    </div>`,
  components: { Child },
  setup() {
    const state = reactive({
      message: 'Hello World!!!',
      name: '',
      count: 0,
      rName: computed(() =>
        state.name
          .split('')
          .reverse()
          .join('')
      )
    })
    const handlerCountAdd = () => {
      state.count++
    }
    const refExample = ref('refExample')
    return {
      ...toRefs(state),
      handlerCountAdd,
      refExample
    }
  }
}
Vue.createApp(App).mount('#app')

6、watch的使用，监听器 watch 是一个方法，它包含 2 个参数，2 个参数都是 function

const { reactive, toRefs, ref, computed, watch } = Vue
let Child = {
  // 属性定义
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  template: `<div>{{title}}</div>`,
  setup(props, context) {
    console.log(props)
    console.log(context)
  }
}
let App = {
  template: `
    <div class="container">
         {{message}}
         <input v-model="name" />
         <p>{{name}}</p>
         <Child title="test props two arguments"/>
         <h4>计数器 demo</h4>
         count: {{count}}
         <button @click="handlerCountAdd"> Click ++ </button>
         <h4>ref使用:{{refExample}}</h4>  
         <h4>反转字符串demo</h4>
         <p>{{name}}反转后为：{{rName}}</p>       
    </div>`,
  components: { Child },
  setup() {
    const state = reactive({
      message: 'Hello World!!!',
      name: '',
      count: 0,
      rName: computed(() =>
        state.name
          .split('')
          .reverse()
          .join('')
      ),
      countDouble: computed(() =>
        state.count*2
      ),
      countTriple: computed(() =>
        state.count*3
      ),
      countQuadruple: computed(() =>
        state.count*4
      ),
    })
    const handlerCountAdd = () => {
      state.count++
    }
    const refExample = ref('refExample')
    watch(() => [state.count, state.countDouble, state.countTriple, state.countQuadruple], (val, preVal) => {
      console.log('watch val==', val);
      console.log('watch preVal==', preVal);
    })
    return {
      ...toRefs(state),
      handlerCountAdd,
      refExample
    }
  }
}
Vue.createApp(App).mount('#app')