Vue3(3)

Qwe7

发布于 2022-06-30 09:18:34

5190

发布于 2022-06-30 09:18:34

文章被收录于专栏：网络收集

3、Vue3支持碎片(Fragments)

组件来说，大多代码在Vue2和Vue3都非常相似。Vue3支持碎片(Fragments)，就是说在组件可以拥有多个根节点。

这种新特性可以减少很多组件之间的div包裹元素。在开发vue的时候，我们会发现每一个组件都会有个div元素包裹着。就会出现很多层多余的div元素。碎片(Fragments)解决了这个问题。

Vue2 表格template

<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ username + ' ' + password }}
    </p>
  </div>
</template>

在Vue3的唯一真正的不同在于数据获取。Vue3中的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中。— 所以我们需要访问这个反应状态来获取数据值。

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input
     type='text'
     v-model='state.username'
     placeholder='Username'
    />
    
    <input
     type='password'
     v-model='state.password'
     placeholder='Password'
    />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>

4、Optinos Api 与 Composition API

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

// vue2

export default {
  props: {
    title: String
  },
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 登陆方法
    }
  },
  components: {
    "buttonComponent": btnComponent
  },
  computed: {
    fullName() {
      return this.firstName + " " + this.lastName;
    }
  }
}

// Vue3

export default {
  props: {
    title: String
  },
  
  setup () {
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }
  }
}

但是目前 Vue3 还保留了 Vue2 的 options api 写法，就是可以“并存”，如：

// ...
setup() {
  const val = ref<string>('');
  const fn = () => {};
  return {
    val,
    fn
  };
},
mounted() {
  // 在 mounted 生命周期可以访问到 setup return 出来的对象
  console.log(this.val);
  this.fn();
},
// ...

上述写法是完全没有任何问题的

5、建立数据 data

Vue2 - 这里把两个数据放入data属性中

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

为了可以让开发者对反应型数据有更多的控制，我们可以直接使用到 Vue3 的反应API（reactivity API）。

使用以下三步来建立反应性数据:

从vue引入reactive

使用reactive()方法来声名我们的数据为反应性数据

使用setup()方法来返回我们的反应性数据，从而我们的template可以获取这些反应性数据

import { reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }
}

在新版当中setup等效于之前2.0版本当中得到beforeCreate,和created，它是在组件初始化的时候执行，甚至是比created更早执行。值得注意的是,在3.0当中如果你要想使用setup里的数据，你需要将用到值return出来，返回出来的值在模板当中都是可以使用的。

假设如果你不return出来，而直接去使用的话浏览器是会提醒你：

runtime-core.esm-bundler.js?5c40:37 [Vue warn]: Property “name” was accessed during render but is not defined on instance.

at (Root)

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

api