Vue 和 jQuery 两者之间的区别是什么？

jQuery 曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国外他的使

用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏

览器端的实现，jQuery 的使用率将会越来越低

vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM

模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数

据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，react 都

是大同小异，本质上都是基于 MVVM 的理念，然而 vue 以他独特的优势简单，快速，组合，紧

凑，强大而迅速崛起

Vue2和Vue3的区别

vue2的双向数据绑定是利用ES5的一个Object.definePropert()

vue3中使用了ES6的Proxy 对数据代理。

Proxy 对象是ES6新出的一个特性,用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)

defineProperty只能监听某个属性，不能对全对象监听

Proxy 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)

Vue 生命周期

Vue2----------------vue3
beforeCreate      ->setup()
created           ->setup()
beforeMount       ->onBeforeMount
mounted           ->onMounted
beforeUpdate      ->onBeforeUpdate
updated           ->onUpdated
beforeDestroy     ->onBeforeUnmount
destroyed         ->onUnmounted
activated         ->onActivated
deactivated       ->onDeactivated
errorCaptured     ->onErrorCaptured

语法

一、Html语法

可以实现2个并行div

<div class="hello">
   22
 </div>
 <div>212</div>

vue2源码分析是因为querySelector选择器的第一个元素，以第一个元素为根标签切入口，开始渲染整个模版。

vue3则不需要加根标签了，外层有个Fragment虚拟元素包裹，这样就减少了层级嵌套和内存的开销

<template>
<!-- fragment 在此做根节点页面不渲染此标签-->
<fragment>
<!-- template 循环-->
<template v-for="(item,index) in list"></template>
</fragment>
</template>

二、Vue3语法setup

<template>
   <div>
     <p>姓名：{{name}}</p>
     <p>年龄：{{age}}</p>
     <button @click="plusOne()">+</button>
   </div>
 </template>
 
 <script>
 export default {
   name:'app',
 
   setup(){
     let name='王双';
     let age=12;
     function plusOne(){
       age++ //想改变值或获取值 必须.value
       console.log(age)
     }
     return { //必须返回 模板中才能使用
       name,age,plusOne
     }
   }
 }
 </script>

三、Vue3怎么进行双向绑定（先说ref）

<template>
  <div>
    <p>姓名：{{name}}</p>
    <p>年龄：{{persion.age}}</p>
    <p>性别：{{persion.sex}}</p>
    <button @click="plusOne()">+</button>
  </div>
  <div ref="eleDom">ref-dom-test</div>
  <div ref="eMAIN">eMAIN</div>
</template>

<script>
import {onMounted, ref} from 'vue'
export default {
  name:'app',

  setup(){
    let name='王双';
    let persion=ref({
      sex:'男',
      age:12
    })

    function plusOne(){
      persion.value.age++ //想改变值或获取值 必须.value
      persion.value.sex=='男'?persion.value.sex='女':persion.value.sex='男'
    }

    const eleDom = ref(null)
    const eMAIN = ref(null)
    // eslint-disable-next-line no-undef
    onMounted(() => {
      console.log(eleDom.value.innerHTML) // ref-dom-test
      console.log(eMAIN.value)
    })
    return { //必须返回 模板中才能使用
      eleDom,
      eMAIN,
      name,persion,plusOne
    }
  }
}
</script>

注：Ref 缺点每次更改属性的时候都要.value.xx

用reactive可以去除.value

****reactive

<template>
  <div>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <p>性别：{{persion.sex}}</p>
    <button @click="plusOne()">+</button>
  </div>
</template>

<script>
import  {reactive} from  'vue'
export default {
  name:'app',

  setup(){
    let name='王双';
    let age=reactive(12);
    let persion=reactive({
      sex:'男'
    })
    function plusOne(){
      age++ //想改变值或获取值 必须.value
      persion.sex=='男'?persion.sex='女':persion.sex='男'
    }
    return { //必须返回 模板中才能使用
      name,age,persion,plusOne
    }
  }
}
</script>

\

四、对比ref和reactive：

1、从定义数据的角度：

ref用来定义 基本类型数据

rective用来定义 对象（数组）类型数据

备注：ref也可以定义对象（数组）类型数据，它内部会自动通过reactive 转为代理对象

2、使用角度对比

ref定义的数据：操作数据需要.value,读取数据时模板中不需要加.value

reactive 均不需要加.value

ref是一个对象(不会丢失响应式),value存储值，通过.value属性的get和set来实现响应式

五、computed

以前vue2是方法体包裹方法，现在是一个个的方法

例如：带get、set执行属性

<template>
   <div>
     <p>{{ msg.name }}</p>
     <p>{{ msgDouble }}</p>
     <button @click="msgDouble = 10">修改</button></div>
 
 </template>
 <script>
 import { computed,reactive }from "vue"
 export default {
   name: 'computed',
   setup() {
     const msg = reactive({name: 100});
     let msgDouble = computed({
       get: () => {
         console.log(" get调用");
         return msg.name * 2;
       },
       set: (val) => {
         console.log(" set调用");
         return msg.name = val - 1;
       }
     });
     return {
       msg,
       msgDouble
     }
   }
 }
 </script>

六、Watch

<template>
   <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
   <div>
     <div>姓名：{{person.name}}</div>
     <div>年龄：{{person.age}}</div>
     <div>薪资：{{person.job.joblist.money}} K</div>
     <button @click="person.name += '~'">修改姓名</button>
     <button @click="person.age ++">修改年龄</button>
     <button @click="person.job.joblist.money ++">提高</button>
   </div>
 </template>
 <script>
 import { ref,  watch,reactive } from "vue";
 export default {
   setup() {
     let sum = ref(0);
     let person = reactive({
       name: "lisa",
       age: 18,
       job: {
         joblist: {
           money: 10,
         },
       },
     });
     //若watch监视的是reactive定义的响应式数据，则无法正确获得oldvalue!
     //这句话的意思是监听对象key的时候oldvalue无法获取，如果监听属性的话是可以的
     watch(()=>person.job,(newValue, oldValue) => {
       console.log("person.job对象发生变化 ==> ", newValue, oldValue);
     },{deep:true})
     watch(()=>person.age,(newValue, oldValue) => {
       console.log("person.age ==> ", newValue, oldValue);//oldvalue可以获取
     },{deep:true})
 
     watch(sum, (newValue, oldValue) => {
       console.log("sum ==> ", "新数据"+newValue, "老数据"+oldValue);
     });
     return {
       person,sum
 
     };
   },
 };
 </script>

七、toRef or toRefs

toRef：作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

toRefs：将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象

<template>
  <div>
    <p>姓名 {{name}}</p>
    <p>年龄 {{age}}</p>
    <p>性别 {{sex}}</p>
    <p>内容{{job.name}} 薪资{{job.salary}}</p>
  </div>

</template>
<script>
// import { reactive,toRef} from 'vue';
import { reactive,toRefs} from 'vue';
export default {

  setup() {

    let person = reactive({
      name:'张三',
      age:18,
      sex:'男',
      job:{
        name:'UI开发',
        salary:'20'
      }
    })

    return {
      // person,
      // name:toRef(person,'name'),
      // age:toRef(person,'age'),
      // sex:toRef(person,'sex'),
      // job:toRef(person,'job'),
      ...toRefs(person)

    }
  },

};
</script>

八、provide和inject

\

作用：祖孙组件之间的通信

vue2的这中套娃需要一层一层的传，特别麻烦，vue3利用provide引入其他组件可以利用inject调用

九、Vue 路由取参有改变 传参无变化

import {useRouter, useRoute} from'vue-router'
const uid = router.currentRoute.value.query.uid;
const ruidx = useRoute(); //之前那种方式取值
const uidx = ruidx.query.uidx;

 

---

最后总结

vue2展示模式

\

vue3展示模式

\