web学习笔记（七十）

1.webpack和vite区别

2. vue2声明数据和绑定事件

3.vue2 data为什么必须是函数？

4.vue2事件传参

5.计算属性和watch

6.this.$router和this.$route

1.webpack和vite区别

它们都是代码构建工具，就是把项目中的.vue文件转换为浏览器认识的html和css代码；
他们的核心功能是编译代码，将组件化的代码最终转化为html、css、js,以便浏览器能够识别代码并加载页面。附加功能：（1）提供了一个开发服务器，方便调试；（2）压缩css和js代码；（3）组件拆包，提升首屏加载速度（路由懒加载）
在开发阶段vite比webpack编译速度快，因为webpack在开发阶段，也是实时的将组件转换为js，是实时编译的，因此每次保存代码webpack都要把整个项目全部编译一遍，效率低下，而vite开发阶段采用的是js模块化方式来编译项目，不是全量编译，速度快。

2. vue2声明数据和绑定事件

vue2是选项式api，所有的响应式数据都要写在data中，并且需要return出去，事件的绑定方法和vue3是一样的，但是需要将声明的方法都写在 methods对象中。

<template><div class="home"><h2>首页</h2><button @click="add">加</button><button @click="subtract">减</button><h2>{{ count }}</h2></div></template><script>export default {name: "HomeViem",data() {return {// 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。count: 1,};},methods: {add() {this.count++;},subtract() {this.count--;},},};</script>

需要注意的是如果页面中并不需要响应式数据就可以不写data，但是只要写data就一定要在内部写一个return,哪怕data内部并没有声明响应式数据也一定要写return。在script里面调用响应式数据和方法都是需要通过this来操作的，eg：this.count

3.vue2 data为什么必须是函数？

如果data不是函数，而直接写一个对象，那么所有组件共用同一个数据了，此时的数据变成了全局变量，任意一个组件修改data中的数据，所有组件都会同步变化，这样的话，组件复用就会出现问题，因为组件复用本质上是复用的标签结构和样式而已，数据肯定不能共享，每个组件实例对象this都需要维护自己内部的数据，保证数据的独立性。因此data必须是函数，且函数每部需要返回一个新对象，每次组件实例this被创建的时候，vue都会调用data这个函数，返回一个新对象，对象内部包裹的就是当前组件所拥有的响应式数据。

4.vue2事件传参

和vue3的传参方式是一样的，在没有自定义参数时可以在事件内部直接打印事件对象e，输出相关信息，但是当有自定义参数时需要在传实参时传一个$event，然后在形参的位置用e接一下，再在事件内部输出事件对象e。

<body><div id="app"><h1>{{num}}</h1><button v-on:click="add">++</button><button @click="add5(5,$event)">+5</button></div><script src="./vue.js"></script><script>new Vue({el: '#app',// 存放在data中的数据都是响应式数据，所谓的响应式就是改变数据视图。data: {num: 0},// methods方法methods: {add: function (e) {// 事件对象console.log(e);console.log(this);this.num++},add5(n, e) {console.log(e);this.num += n;}}})</script></body>

5.计算属性和watch

vue2中计算属性需要写到computed选项内部。watch监听需要写到watch选项内部

（1）计算属性主要用于计算购物车商品总价，会根据响应式护士巨大变化自动计算结果。需要注意的是计算属性必须返回一个结果。

<template><div class="home"><h2>首页</h2><button @click="add">加</button><button @click="subtract">减</button><h2>{{ count }}</h2><p>双倍{{ doublecount }}</p><p>加100 {{ testcount }}</p></div>
</template>
<script>
import { computed } from "vue";
// this.$router  用来跳转路由  this.$router.push()  this.$router.replace
// this.$route  用来获取路由参数 this.$route.query
export default {name: "HomeViem",data() {return {// 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。count: 1,};},methods: {add() {this.count++;},subtract() {this.count--;},},computed: {// 使用场景：购物车计算商品总价// 根据响应式数据的变化自动计算结果。//   计算属性必须返回一个结果doublecount() {return this.count * 3;},testcount() {return this.count + 100;},},};
</script>

（2）watch监听可以监听路由的跳转或者响应式数据的变化，没有返回结果，只是监听，做实时搜索可以用，watch监听有两者写法，一种是函数写法，一种是对象写法，当需要开启深度监听或者首次触发时就需要用到对象写法。

<template><div class="home"><h2>首页</h2><button @click="add">加</button><button @click="subtract">减</button><h2>{{ count }}</h2><p>双倍{{ doublecount }}</p><p>加100 {{ testcount }}</p></div>
</template>
<script>
import { computed } from "vue";
// this.$router  用来跳转路由  this.$router.push()  this.$router.replace
// this.$route  用来获取路由参数 this.$route.query
export default {name: "HomeViem",data() {return {// 这里声明当前组件的响应式数据 一定要保持结构完整，如果写data就一定要写return，哪怕没有响应式数据也要写。count: 1,};},methods: {add() {this.count++;},subtract() {this.count--;},},watch: {// 监听路由的跳转或者响应式数据的变化// 没有返回结果，只是监听， 做实时搜索可以用//函数写法// count: (newv, oldv) => {//   console.log(newv, oldv);//   console.log(newv + oldv);// },$route: (newv, oldv) => {console.log(newv, oldv);},//   对象写法count: {handler(newv, oldv) {console.log(newv, oldv);console.log(newv + oldv);},immediate: true, //首次立即执行deep: true, //深度监听，主要针对对象，数组这种复杂的数据},},
};
</script>