018 Vue3新特性1

Vue3是目前Vue的最新版本，自然也是新增了很多特性

1、六大亮点

Performance：性能更比 Vue 2.0 强。

Tree shaking support：可以将无用模块 “剪辑”，仅打包需要的。

Composition API：组合 API

Fragment, Teleport, Suspense：“碎片”，Teleport 即 Protal 传送门，“悬念”

Better TypeScript support：更优秀的 Ts 支持

Custom Renderer API：暴露了自定义渲染 API

2、ref 或者 reactive

在 2.x 中通过组件 data 的方法来定义一些当前组件的数据

data() {

  return {

    name: 'iwen',

    list: []

  }

}

在 3.x 中通过 ref 或者 reactive 创建响应式对象

import { ref, reactive } from "vue"

export default {

  name: 'Helloworld',

  setup(){

    const name = ref("iwen")

    const state = reactive({

      list:[]

    })

    return{

      name,

      state

    }

  }

}

 

3、methods 中定义的方法写在 setup ()

在 2.x 中 methods 来定义一些当前组件内部方法

methods: {

  http(){}

}

在 3.x 中直接在 setup 方法中定义并 return

setup() {

  const http = ()=>{

    // do something

  }

  return {

    http

  };

 4、setup () 中使用 props 和 context

　　在 2.x 中，组件的方法中可以通过 this 获取到当前组件的实例，并执行 data 变量的修改，方法的调用，组件的通信等等，但是在 3.x 中，setup () 在 beforeCreate 和 created 时机就已调用，无法使用和 2.x 一样的 this，但是可以通过接收 setup (props,ctx) 的方法，获取到当前组件的实例和 props

export default {

  props: {

    name: String,

  },

  setup(props, ctx) {

    console.log(props.name)

    ctx.emit('event')

  },

}

}