在2020年9月中旬，vue.js发布了3.0正式版，在不久的将来，VUE3.0 也终将成为大前端的必然趋势，

环境搭建

1. node 版本要求: Node.js8.9或更高版本 ,输入 node -v查看node版本

2. vue-cli 版本：达到 vue-cli4.5.0 以上，可创建vue3.0的项目，支持体验vue3.0的新特性，（3.x Preview）,vue -V 查看脚手架版本

3. 终端输入： vue create project_name

核心知识

一 、组件的定义和使用

组件：是维护单一功能，可复用的单个个体，相同的样式及逻辑即可抽离成组件，方便维护，复用性增强。也是vue3.0项目中，最核心的概念

defineComponent：vue3.0中提供了一个函数返回传递给它的对象,最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。此处先不展开介绍，后续会总结 vue3.0 + ts。

setup：组件的启动函数，两个参数: props（父组件传递的数据），content （ 上下文对象）,最后return 定义的数据，方法，钩子函数等，且setup中 没有this，不能访问this

<script>

    import { defineComponent } from 'vue'
    
    export default defineComponent ({
      setup (props, content) {
        // TODO 数据，方法，钩子函数等
        return { }
      }
    })

script>

二、数据的定义和使用

1. ref：定义单个数据,接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。

import { ref } from 'vue'

export default {
  setup () {
    let num1 =  ref(10)  // Number
    let name1 =  ref('Echoyya')  // String
    let arr1 =  ref(['a','d','c','d'])  // Array 
    let obj1 =  ref({age:20})  // Object 

    // 获取及改变 ref对象的值，获取内部值的单一属性 value
    console.log(num1.value) // 10

    num1.value++
    console.log(num1.value) // 11
    
    return {
      //使用 ref 定义的数据，需要直接 return
      num1,name1,arr1,obj1
    }