初探Vue3，几个常用的重要特性抢先看（建议收藏）

Posted 2021-09-04 欧阳呀

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初探Vue3，几个常用的重要特性抢先看（建议收藏）相关的知识，希望对你有一定的参考价值。

Vue3.0重磅来袭

1. Vue3.0项目创建（脚手架方式）

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

接下来按步骤走即可

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

也可以直接选择默认版本先玩一下

2. 拉开序幕 —— setup()

为什么用拉开序幕这个词？因为它可以代替许多东西，用起来特别爽

2.1 简介：

新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

2.1.1 一般使用场景（返回对象）

<template>
  <div>
    <h1>玩一波setup</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}} </h2>
    <button @click="sayName">说话</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  setup(){
  	// 此处的数据是无法实现响应式的
  	// 下一小节讲如何让它变成响应式
    let name = "法外狂徒张三"
    let age = 3
    function sayName(){
      console.log(`我是${name}, 我${age}岁了`)
     
    }
    // 返回的数据可以直接显示在模板中
    return{
      name,
      age,
      sayName
    }
  }
}
</script>

可以在setup()中直接定义数据和方法

2.1.2 也可以用于返回一个模板（不常用，了解即可）

直接返回一个模板

return() => h('h1', 'vue3.0很牛逼')

3. 基本数据的响应式实现 —— ref()

先将 ref() 引入进来
ref 用于处理基本数据类型
如果让它处理引用数据类型会很麻烦

<template>
  <div>
    <h1>玩一波setup</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}} </h2>
 
    <button @click="change">修改</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    let name = ref("法外狂徒张三")
    let age = ref(3)

    function change(){
      // 基本数据 第一层用的是get set 第二层 对象用的是 Proxy代理
      name.value = "李四";  
      age.value = 38;

    }
    
    return{
      name,
      age,
      change
    }
  }
}
</script>

点击按钮，数据就会进行修改

4. 引用数据的响应式实现 —— reactive()

先将 reactive() 引入进来
reactive()不能用于基本数据类型，会报错

<template>
  <div>
    <h1>玩一波setup</h1>
    <h3>女朋友名字：{{gf.gfName}}</h3>
    <h3>女朋友年龄：{{gf.gfAge}}</h3>
    <h3>新属性C：{{gf.a.b.c}}</h3>
    <h3>爱好： {{gf.hobby}}</h3>
    <button @click="change">修改</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    let gf = reactive({
      gfName: '刘亦菲',
      gfAge: 18,
      a:{
        b:{
          c: '我是属性C'
        }
      },
      hobby: ['唱','跳','rap','篮球']
    })
    
    function change(){
      gf.gfName="杨幂"
      gf.gfAge = 38
      // 深层次的对象可以处理
      gf.a.b.c = "新的C属性"
      // 数组可以直接改
      gf.hobby[0] = "撩妹"
    }
    
    return{
      gf,
      change
    }
  }
}
</script>