vue3.0自学简介

3.0优点

1. 支持vue2.0语法
2. 性能提升：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%
3. typescript支持

3.0环境搭建

强烈建议用可视化工具，惊艳到了

vue3.0地址：
https://www.vue3js.cn/docs/zh/guide/installation.html#npm

命令行安装最新版

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

执行vue ui

详见技术胖教程

3.0新增api个人理解

import {
  ref,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onRenderTracked,
  onRenderTriggered,
  watch,
} from 'vue'


export default {
  name: 'App',
  setup() {
    const data = reactive({
      codeList: ['vuex', 'router', 'axios'],
      selectApi: '--',
      selecApiFn: (i: number) => {
        data.selectApi = data.codeList[i]
      },
    })
//将overtext转化为响应式的
    const overtext = ref('vue3体验中心')
    const overAction = () => {
      overtext.value = '选择完成|' + overtext.value
    }

    watch([overtext, () => data.selectApi], (newvalue, oldvalue) => {
      console.log('newvalue' + newvalue)
      console.log('oldvalue' + oldvalue)
      document.title = newvalue[0]
    })
    return {
      data,
      overtext,
      overAction,
    }
  },
}


//setup函数
//创建组件之前，在beforeCreate和created之前执行。相当于创建了vue2.0的data和method

//ref()
//相当于将某个原始值转化为响应式的，针对单个的
//reactive()
//相当于将某个原始值转化为响应式的，针对多个的

//ref()和reactive()无优劣之分，都是响应式，个人觉得reactive较好，有点像vue2.0的data，便于维护

//toRefs响应式状态解构，没有写出来，有兴趣的自己查阅官网