vue3开启大海贼时代！！！

admin • 2023-05-17 20:35 • 研发管理

大海贼时代结束！！！

vue3开始！！！

setup初体验

1.与vue2不同的是定义的变量和方法都被放到一个叫 setup( )里面了

2.vue2里面没有了 this

3. 1）访问变量先定义

const msg = '1'

serup语法糖

1.在script 加setup(语法糖) 这样就可以不用先定义变量，在返回，在使用了

2.直接就可以下面定义，上面调用了

3.在引入模块和js文件时，记得一定要加上后缀名.vue，

<template>
  <h1>{{ msg }}</h1>
  <button @click="appDate">点击出现js文件的内容</button>
  <hello></hello>
</template>
<script setup>
import { appDate } from './appDate.js'
// 一个模块
import hello from './components/hello.vue'
const msg = "标题"

</script>

重新航海！！！

Vue2选项式Api Vue3组合式Api

<template>
  <h4> {{ name }} </h4>
</template>
<script>
export default {
  setup() {
    // 注册变量
    let name = "张三"
    // 导出
    return {
      name
    }
  }
}
</script>

ref的使用

1.定义一个响应式的数据

<template>
  <h4> {{ name }} </h4>
  <button @click="updateName">修改name</button>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    // 注册变量
    let name = ref("张三")

    const updateName = () => {
      console.log(name);
      name.value = '张四'
    }
    // 导出
    return {
      name,
      updateName
    }
  }
}
</script>

reactive的案例使用定义对象类型的响应式数据

<template>
  <div>
    姓名：{{ counts.name }} <br />
    年龄：{{ counts.age }}<br />
    爱好：{{ counts.hoopy }}<br />
    喜欢：{{ counts.like }}<br />
  </div>
  <button @click="updateworld">魔法</button>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    let counts = reactive({
      name: "小明",
      age: 10,
      hoopy: ['乒乓球', '篮球', '足球'],
      like: {
        name: "篮球",
        time: "10年"
      }
    })
    const updateworld = () => {
      counts.name = '小用'
      counts.age = 23
      counts.hoopy[2] = "橄榄球"
      counts.like.name = "橄榄球",
        counts.like.time = "30年"
    }
    // 导出
    return {
      counts,
      updateworld
    }
  }
}
</script>

vue2的拦截方式的缺陷

Vue2的

对象中新增一个属性和删除一个属性 Object.defineProperty 拦截不到出现 (数据修改了，页面不变）曲线救国

新增属性让Vue拦截到 this.person （对象名）

一个属性this.$set( this.person , ' 属性名字 ' ， ' 添加的元素 ')
引入 Vue实例通过Vue.set( this.person , 'sex' , ' 女 ' )

删除属性让Vue拦截到

this.$delete(this.person , ' 删除的属性名 ')
Vue.delete(this.person , ' 删除的属性名 ')

Vue3的数据双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let person = {
            name: "张三",
            age: 23
        }

        // Proxy 代理 拦截对象 
        // Reflect 反射 对数据进行操作
        const p = new Proxy(person, {
            /**
             * 第一个参数 Proxy 化的person对象
             * 第二个参数 propName 修改的那个属性
             * */
            get(target, propName) {
                console.log("get读取到了");
                return Reflect.get(target, propName)
            },
            // value  修改的值
            set(target, propName, value) {
                console.log("set修改了");
                Reflect.set(target.propName, value)
            },
            deleteProperty(target, propName) {
                console.log("数据删除了经过了");
                return Reflect.deleteProperty(target, propName)
            }
        })



    </script>
</body>

</html>

Vue3 和 Vue2 的区别

setup 比 beforeCreate () 执行的还早， setup里面取不到 this 事 undefined
Vue2中props 传值可以不接收在 this.$attrs里面获取 Vue3 不接收会发出警告，必须用props接收在setup第一个参数中获取到值
Vue3中的自定义事件子传父 Vue3中必须要用 emits 接收在setup 的第二个参数 context.emit(' ')中获取
Vue3中 setup的第二个参数里面
1. attrs：父组件传递过来的参数，不接收到这里面了
2. emit：父组件自定义的方法
3. slots：父组件在组件插槽中插入的dom元素

组件的传值和自定义事件的使用和插槽

// 组件传值接收  
props: ['personName', 'personAge'],
// 自定义方法接收    
emits: ['hello'],
// 插槽 
    <template v-slot:school>
      <h1>尚硅谷school</h1>
    </template>
// 插槽使用 
 <slot name="school"></slot>

计算属性

<template>
  <h1>计算属性</h1>
  <input type="text" v-model="person.firstName"> <br>
  <input type="text" v-model="person.lastName"> <br>
  <input type="text" v-model="person.sumName">
</template>
<script>
import { computed, reactive } from 'vue'
export default {
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三"
    })
    // 计算属性的渐变方法  不能修改
    // person.sumName = computed(() => {
    //   return person.firstName + "-" + person.lastName
    // })

    // 计算属性  可以修改
    person.sumName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {  //修改的值
        let sumValue = value.split('-') // 转化成字符串
        // console.log(sumValue);
        person.firstName = sumValue[0]
        person.lastName = sumValue[1]
      }
    })
    return {
      person
    }
  }
}
</script>

监视属性

Vue2的监视属性

  watch: {
    // 简易版的：
    // numberOne(newValue, oldValue) {
    //   console.log("数据", newValue, oldValue);
    // }
    numberOne: {
      handler(newValue, oldValue) {
        console.log("监听到了", newValue, oldValue);
      },
      deep: true,
      immediate: true
    }
  },

Vue3的监听 Vue3的监听是一个函数的形式

    // 监听单个 第一种
    watch(numberOne, (newValue, oldValue) => {
      console.log("监听的值:", newValue, oldValue);
    })

    // 监听多个 第二种
    watch([StringTwo, numberOne], (newValue, oldValue) => {
      console.log("监听的值:", newValue, oldValue);
    })


    // 监听reatvie 属性的对象 
    /**
     *  oldValue失效
     *  deep: false 失效
     * */
    // watch(person, (newValue, oldValue) => {
    //   console.log("监听的值", newValue, oldValue);
    // }, {
    //   deep: false
    // })

    // 监听reactive 的一个属性  第一个参数设置函数  第三种
    // watch(() => person.name, (newValue, oldValue) => {
    //   console.log("监听的值:", newValue, oldValue);
    // })

    // 监听reactive 的多个属性                第四种
    // watch([() => person.name, () => person.age], (newValue, oldValue) => {
    //   console.log("监听的值:", newValue, oldValue);
    // })

watchEffect 函数
1. 非惰性的，首页刷新执行！
2. 全都监视用谁监视谁使用场景只要发生修改watchEffect 的代码就执行。

生命周期函数讲
1. 销毁前（beforeDestroy )和( destroyed ) 销毁修改成了卸载前( beforeUnmount )，已卸载( unmounted )
reactive, ref, shallowReactive, shallowRef
1. const person = reactive({ // 深层响应式
2. const person = shallowReactive({// 浅层响应式
3. const person = ref({ // 可以对对象响应式
4. const person = shallowRef({ // 限制ref能对对象的响应式只能相应ref(0) 单个数据
readonly, shallowReadonly
1. readonly : 将整个响应式对象修改成只读对象
2. shallowReadonly ：将响应式对象的第一层数据修改成只读数据
3. ```
    // let personReadonly = readonly(person)
    let personReadonly = shallowReadonly(person)
```

toRaw，markRaw

toRaw ：将响应式对象转化成普通对象

markRaw ：将响应式对象永远转化成普通对象

    function updateCar() {
      let car = {
        name: "奔驰",
        price: 23
      }
      person.car = markRaw(car)
    }

toRef, toRefs

    return {
      obj,
      ...toRefs(person)  // 导出整个对象
      // name: toRef(person, 'name'), // 导出单个
      // Hname: toRef(person.hoopy, "Hname") // 导出单个
    }

customRef 定做

里面必须传递一个函数有两个参数
1. track 通知Vue来追踪Value的变化
2. trigger 通知Vue来更新Value的变化
函数必须返回一个对象里面存放get set

function myRef(value, delay) {
      let time
      return customRef((track, trigger) => {
        return {
          get() {
            track() // 通知Vue 来追踪value的变化
            return value
          },
          set(newValue) {
            clearTimeout(time)
            time = setTimeout(() => {
              value = newValue
              trigger() // 通知Vue去重新解析模块
            }, delay)
          }
        }
      })
    }

父组件给后代组件传值
1. 提供： provide( ' car ' , car )
2. 注入： let obj = inject( 'car' )

Vue3 提供了 defineAsyncComponent 方法与 Suspense 内置组件，我们可以用它们来做一个优雅的异步组件加载方案。

import { defineAsyncComponent } from 'vue';
const childOne = defineAsyncComponent(() => import('./components/ChildOne.vue'))

异步组件的引入方法！！！

        <Suspense>
            <!-- 真正的内容 -->
            <template v-slot:default>
                <childTwo></childTwo>
            </template>
            <!-- 没有加载出来的占位符 -->
            <template v-slot:fallback>
                <h2>稍等加载中</h2>
            </template>
        </Suspense>

Suspense 组件无需注册直接什么，里面的插槽名字是固定的

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

javascript 开发语言

二维码

阿里云域名购买与备案，解析使用教程

< <上一篇

面试谎报了职级，本来是6，谎报成7，已经到HR这一步了，怎么了？

下一篇>>

搜索内容