vue3升级差异体验

值得关注的新特性

• 组合式 API
• Teleport
• 片段
• 触发组件选项
• 来自 @vue/runtime-core 的 createRenderer API 创建自定义渲染器
• 单文件组件组合式 API 语法糖 <script setup> 实验性
• 单文件组件状态驱动的 CSS 变量 <style vars> 实验性
• 单文件组件 <style scoped> 现在可以包含全局规则或只针对插槽内容的规则

vue2 选项式api

vue3基本模板

htmlCopy
<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed, defineComponent, onMounted } from 'vue';

export default defineComponent({
  props:{
    msg:{type:String}
  },
  setup() {
    const
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2),
    });

    function increment() {
      state.count++;
    }

    onMounted(() => {
      console.log('component is mounted!');
    });
    return {
      state,
      increment,
    };
  },
});
</script>

组合式api

setup入口函数 在beforeCreate之后created之前执行

接收props和context={slots,emit,refs}

jsCopy
export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props,context) {
    console.log(props) // { user: '' }

    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

setup的props不能直接解构，否则会失去响应式,

如果要解构，可以使用toRefs

jsCopy
import { toRefs } from 'vue'

setup(props) {
	const { title } = toRefs(props)
	console.log(title.value)
  console.log(props.value)
}

jsCopy
export default {
  setup(props) {
    /* ✗ BAD */
    const { count } = props

    watch(() => {
      /* ✓ GOOD */
      const { count } = props
      console.log(count)
    })

    return () => {
      /* ✓ GOOD */
      const { count } = props
      return h('div', count)
    }
  }
}

jsCopy

reactive和ref

jsCopy

jsCopy

vue实现reactHooks

jsCopy

jsCopy

参考

• vueRfc
• vue2
• 常用api
• vue3