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

悠悠 2022-09-03 10:21 73阅读 0赞

### Vue3.0重磅来袭 ###

*   *  1. Vue3.0项目创建（脚手架方式）
     *  2. 拉开序幕 —— setup()
     *  3. 基本数据的响应式实现 —— ref()
     *  4. 引用数据的响应式实现 —— reactive()
     *  5. FAQ（需要注意的地方）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

## 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? - 直接回车

**也可以直接选择默认版本先玩一下**  
![在这里插入图片描述][82cd7992339e40539598a0766a61111f.png]

## 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很牛逼')

![在这里插入图片描述][852addff0a974962a9c68074f53a3370.png]

## 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>

![在这里插入图片描述][3e77ea85471c49ac9f176ba943e29551.png]

## 5. FAQ（需要注意的地方） ##

> **5.1 setup()执行的时机**

*  在beforeCreate之前执行(一次), 此时组件对象还没有创建
 *  this是undefined, 不能通过this来访问data/computed/methods / props
 *  其实所有的composition API相关回调函数中也都不可以

> **5.1 setup()的返回值**

*  **一般都返回一个对象，为模板提供数据**。也就是模板中可以直接使用此对象中的所有属性/方法
 *  返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
 *  返回对象中的方法会与methods中的方法合并成功组件对象的方法  
    如果有重名, setup优先

**注意:**

*  一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
 *  setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据

> **5.3 reactive 与 ref 细节**

*  这两者是Vue3的 composition API中2个最重要的响应式API
 *  ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
 *  如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
 *  ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
 *  reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
 *  ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)  
    ![在这里插入图片描述][f9411e4cb31c4062a4b78f13e1d93bf1.png]
 *  **本文先更新这几个API，后续会持续更新Vue3.0的内容，大家可以关注一波~**
 *  **干货满满，并且会讲的非常详细！**

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

![在这里插入图片描述][20210710213359459.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20220829/71884e3673ca4fc68d7bf7a024dd6511.png
[82cd7992339e40539598a0766a61111f.png]: /images/20220829/f6382aff96a94685a84c017b30128fe9.png
[852addff0a974962a9c68074f53a3370.png]: /images/20220829/f8c0a5a613b345ed8af2dc80470ac394.png
[3e77ea85471c49ac9f176ba943e29551.png]: /images/20220829/8d7de66007664a4a9be2b5d9c442f6de.png
[f9411e4cb31c4062a4b78f13e1d93bf1.png]: /images/20220829/de7fa64c890b4e2da55d56c74ac66cec.png
[20210710213359459.png]: /images/20220829/459155d3309c4fe6a169166b1fd22306.png