vue3.0了解

╰+哭是因爲堅強的太久メ 2022-09-04 05:44 18阅读 0赞

## 项目创建 ##

vue-cli脚手架安装

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

基础默认的2和3选择中是没有typescript的，如果需要使用typescript，需要选择自定义的东西，按向下的箭头和空格键进行选中，完成后enter，后续选中3.x，后面默认即可

### vite构建项目 ###

npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev

最后均可以打开链接即可

## Composition API(常用部分) ##

### **setup** ###

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

### ref ###

*  作用: 定义一个数据的响应式
 *  语法: const xxx = ref(initValue):
    
     *  创建一个包含响应式数据的引用(reference)对象
     *  js中操作数据: xxx.value
     *  模板中操作数据: 不需要.value
 *  一般用来定义一个基本类型的响应式数据

App.vue

<template>
      <h2>setup和ref的基本使用</h2>
      <div>{
       {count}}</div>
      <button @click="updateCount">更新数据</button>
    </template>
    
    <script lang="ts">
    // defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
    import { defineComponent, ref } from 'vue';
    
    export default defineComponent({
      name: 'App',
      // vue2.0的写法
      
      // data() {
      //   return {
      //     count: 0
      //   }
      // },
      // methods: {
      //   updateCount(){
      //     this.count++
      //   }
      // }
    
      // setup是组合API的入口函数
      setup () {
        // let count = 0      // 这里的数据并非响应式的数据
        // ref是一个函数,作用:定义一个响应式数据,返回的是ref对象,对象中有一个value属性,如果需要对数据进行操作,需要使用该ref对象调用value属性的方式进行数据操作
        // html模板中是不需要使用.value属性的写法
        // 一般用来定义一个基本类型的响应式数据
        const count = ref(0)
        console.log(count);
        function updateCount(){
          // 报错的原因是:count是一个ref对象,对象是不能进行 ++操作的
          // count++ 
          count.value++
        }
        return {
          count,
          updateCount
        }
      }
    });
    </script>

## reactive ##

*  作用: 定义多个数据的响应式
 *  const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
 *  响应式转换是“深层的”：会影响对象内部所有嵌套的属性
 *  内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

<template>
      <h2>reactive的使用:实时更改对象内的数据</h2>
      <h3>名字:{
       {user.name}}</h3>
      <h3>年龄:{
       {user.age}}</h3>
      <h3>妻子:{
       {user.wife}}</h3>
      <hr>
      <button @click="updateUser">更新数据</button>
    </template>
    
    <script lang="ts">
    import { defineComponent, reactive } from 'vue';
    
    export default defineComponent({
      name: 'App',
      setup(){
        // 把数据变成响应式
        const obj = {
          name:'小明',
          age: 20,
          wife: {
            name:'小甜甜',
            age: 18,
            cars: ['奔驰','宝马','奥迪']
          }
        }
        // user返回的是一个Proxy的代理对象,被代理的对象就是reactive中传入的对象
        // user是代理对象,obj是目标对象
        // user对象的类型是Proxy
        const user = reactive(obj)
        console.log(user);
        const updateUser = () => {
          // 直接使用目标对象的方式来更新目标中的成员的值,是不可能的,只能使用代理对象的方式来更新数据(响应式数据)
          // obj.name += '=='  
          user.name += '=='
          user.age += 2
          user.wife.name += '++'
          user.wife.cars[0] = '玛莎拉蒂'
        }
        return {
          user,
          updateUser
        }
      }
    });
    </script>

这里的user打印如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

###  操作代理数据 ###

// 这种方式界面可以更新渲染,而且这个数据最终也会添加到obj对象上
          // obj.gender = '女'   
          // user.gender = '男'   
          
          // 界面更新渲染,obj中确实没有age这个属性,下面二者均可
          // delete obj.age  
          delete user.age  
    
          // 总结:如果操作代理对象,目标中的对象数据也会随之变化,同时如果想要在操作数据的时候,界面也要跟着重新更新渲染

最后是全量的部分：

<template>
      <h2>reactive的使用:实时更改对象内的数据</h2>
      <h3>名字:{
       {user.name}}</h3>
      <h3>年龄:{
       {user.age}}</h3>
      <h3>性别:{
       {user.gender}}</h3>
      <h3>妻子:{
       {user.wife}}</h3>
      <hr>
      <button @click="updateUser">更新数据</button>
    </template>
    
    <script lang="ts">
    import { defineComponent, reactive } from 'vue';
    
    export default defineComponent({
      name: 'App',
      setup(){
        // 把数据变成响应式
        const obj: any = {
          name:'小明',
          age: 20,
          wife: {
            name:'小甜甜',
            age: 18,
            cars: ['奔驰','宝马','奥迪']
          }
        }
        // user返回的是一个Proxy的代理对象,被代理的对象就是reactive中传入的对象
        // user是代理对象,obj是目标对象
        // user对象的类型是Proxy
        const user = reactive<any>(obj)
        console.log(user);
        const updateUser = () => {
          // 直接使用目标对象的方式来更新目标中的成员的值,是不可能的,只能使用代理对象的方式来更新数据(响应式数据)
          // obj.name += '=='  
    
          // user.name += '=='
          // user.age += 2
          // user.wife.name += '++'
           
          // user.wife.cars[0] = '玛莎拉蒂'
          
          // 这种方式界面可以更新渲染,而且这个数据最终也会添加到obj对象上
          // obj.gender = '女'   
          // user.gender = '男'   
          
          // 界面更新渲染,obj中确实没有age这个属性,下面二者均可
          // delete obj.age  
          delete user.age  
    
          // 总结:如果操作代理对象,目标中的对象数据也会随之变化,同时如果想要在操作数据的时候,界面也要跟着重新更新渲染
    
          // 通过当前代理对象找到该对象的某个属性,更改该属性中的某个数组的数据
          user.wife.cars[0] = '玛莎拉蒂'
          // 通过当前的代理对象把目标对象中的某一个数组属性添加一个新属性
          user.wife.cars[3] = '奥拓'
        }
        return {
          user,
          updateUser
        }
      }
    });
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20220829/30ff6114b028402e80c513528e394bb5.png