全面拥抱vue3.0

最新推荐文章于 2024-08-23 10:40:05 发布

King十三

最新推荐文章于 2024-08-23 10:40:05 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/sqLeiQ/article/details/117249006

版权

vue2.0和vue3.0的区别

重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）。
update性能提高1.3~2倍。
SSR（服务处理）速度提高了2~3倍。
可以将无用的模块剪辑，仅打包需要的（按需打包）。
不在限于模板中的单个根节点。
更好的typeScript支持。
组合式API（setup）替换原有的OptionsAPI
- 根据逻辑相关性组织代码，提高可读性和可维护性
- 更好的重用逻辑代码（避免mixins混入时命名冲突的问题）
- 但是依然可以沿用Options
```
//Options API
export default {
    data() {
        return{
        
        }
    },
    methods:{
    
    },
    computed:{
    
    }
}

//组合式API
export default {
    setup(){
    
    }
}
复制代码
```

如何创建vue3.0项目

基于vue/cli配置vue3.0

vue/cli脚手架必须是4.3.1版本以上
使用创建项目命令vue create 项目名
最后加上vue add vue-next，创建3.0的项目

基于vite配置vue3.0

有尤雨溪开发的web开发工具，基于浏览器原生ES imports的开发服务器（利用浏览器解析imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用），同时不仅有vue文件的支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。
npm init vite-app 项目名
cd 项目名
npm i
npm run dev

掌握setup和响应式系统API

vue3.0参考文档 v3.cn.vuejs.org/guide/compo…

响应式系统工具集

ref

接收一个参数值并返回一个响应式且可改变的ref对象。
- ref对象拥有一个指向内部值的一个属性.value
- 当ref在模板中使用的时候，他会自动解套，无需在模板内部额外写.value（意思是return出来以后，用小胡子就可以直接使用）
- ref不是Proxy实现的。

unref

如果参数是一个ref，则返回它的value值，否则返回参数本身，他是val = isRef(val)? val.value:val的语法槽

let a = '你好',
b = ref(2)
console.log(unref(a,b)) //'你好',2
复制代码

toRef

将参数转化为ref对象，例如

let a = 0;
console.log(toRef(a)) //ObjectRefImpl {_object: 0, _key: undefined, __v_isRef: true}
复制代码

toRefs

把响应式对象转为普通对象，该普通对象每一个property都是一个ref，和响应式对象property一一对应。

isRef

判断该值是否为ref对象，如果是则返回true，否则是false
```
    let a = 0
    console.log(isRef(a)) // false
复制代码
```

isProxy

检查一个对象是否由reactive或者readonly方法创建的代理

isReactive

检查一个对象是否由reactive创建的响应式代理。
- 如果这个代理是由reactive创建的，但是又被reactive创建的另一个代理包裹了一层，那么同样会返回true

isReaonly

检查一个对象是否由readonly创建的只读代理。

readonly

传入一个对象（响应式或者普通）或ref，返回一个原始对象的只读代理，一个只读的代理是深层的，对象内部任何嵌套的属性也只是只读的。

高级系统响应式API

customRef

computed

传入一个getter函数，返回一个默认不可手动修改的ref对象。

// 第一种写法：不可手动修改值
setup() {
   let a =  computed(()=>{
       let total = state.supNum + state.oppNum
       return ((state.supNum/total)*100).toFixed(2) + '%'
   })
   return{
       a
   }
}

//第二种写法:可以利用set修改,当a所依赖的值supNum和oppNum改变会触发get回调函数，如果修改a的值会触发set回调函数（a.vlue = a.vlue+1就会触发）
setup() {
   let a =  computed({
   get:()=>{
       let total = state.supNum + state.oppNum
       return ((state.supNum/total)*100).toFixed(2) + '%'
   }
   set:(val)=>{
       console.log(val,222)
   }   
   })
   return{
       a
   }
}

复制代码

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

setup(props){
    watchEffect(()=>{
        console.log(props.title)//第一次渲染的时候就会立即执行一次
    })
    let y = ref(0)，
    z = ref(0);
    //如果需要监听多个值
    watchEffect(()=>{
        console.log(y.value,z.value)//必须写value值，因为咱们监听的是value值，不是y的ref对象
    })
}
复制代码

watch

watch完全等价于2.0的watch

watch需要侦听特定的数据源，并在回调函数中执行。
默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。第一次加载页面是不执行的，和watchEffect不一样。

//侦听单个数据
setup(){
watch(state,()=>{
    console.log(state.supNum)
})
//侦听state下的某个数据
watch(()=>state.supNum,()=>{
    console.log('你好'+state.supNum)
})
//侦听ref创建的响应式数据,输出改变后的值和之前的值
let x = ref(0)
setup(){
    watch(x,(x,prevX)=>{
        console.log(x,prevX)
    })
}
//侦听多个数据用数组传参，数组中任意值改变都会触发watch函数
watch([x,y],([x,y],[prevx,prevy]=>{
    console.log(x,y,prevx,prevy)//prevx,prevy改变之前的值
}))
复制代码

watchEffect和watch的区别

不需要手动传入依赖值。
每次初始化时会执行一次回调函数来获取依赖值。
无法获取原值，只能获取改变后的值。

setup

setup函数是一个新的组件选项，作为在组件内使用的CompositionAPI的入口点。
- 初始化props和beforeCreate之间调用
- 可以接收props和context
- this在setup中不可用，因为实在beforeCreate之前执行的，这时候还没有创建this实例。
setup(props)
- props是基于Proxy代理的响应数据

setup语法

setup(){
    //return出去的值可以直接在html中使用，{{num}}
    return{
    
    }
}
复制代码

构建响应式数据

方法一，利用ref,一般处理简单值的响应式

原理还是基于defineProperty监听value值

<template>
  <div>
    <h3>{{ title }}</h3>
    <div>
      <p>支持人数:{{ supNum }}</p>
      <p>反对人数:{{ oppNum }}</p>
      <p>支持率:</p>
      <button @click="change(0)">支持</button>
      <button @click="change(1)">反对</button>
    </div>
  </div>
</template>

// 第一种直接使用ref，比较麻烦
setup() {
    let supNum = ref(0),
    oppNum = ref(0);
    functiom change(x){
        x == 0? supNum.value++:oppNum.value++
    }
    return{
        supNum,
        oppNum,
        change,
    }
}

// 第二种ref，创建一个ref对象
setup(){
    let state = ref({
        supNum:0
        oppNum:0
    })
    function change(x){
        x == 0? state.value.supNum++ : state.value.oppNum++
    }
    return{
        state
    }
//html在使用的时候，{{state.supNum}}
}
复制代码

方法二，利用 reactive

基于Proxy对数据进行深度的监听，以此构建响应式
- 接收一个普通对象然后返回该普通对象的响应式代理
- 响应式转换是深层的，会影对象内部所有嵌套的属性

setup() {
    let state = reactive({
       supNum: 0,
       oppNum； 0
    })
    function change(x){
        x == 0? state.supNum++ : state.oppNum++
        // 比Object.defineProperty好用在于，对与数据或者并未初始化的对象成员，都可以随意的改变值，而且具备响应式的数据。
    }
    return{
        ...toRefs(state),
        change
    }
    //html在使用的时候，{{supNum}}
}
复制代码

模板refs

<template>
  <div>
    <div ref="root">你好</div>
  </div>
</template>
export default {
setup(){
    let root = ref();
    onMounted(()={
        console.log(root.value) //返回值是div元素
    })
    return{
        root
    }
}
}
复制代码