web学习笔记（七十）
shan33__ 2024-07-09 14:33:02 阅读 72
目录
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对象中。
<code><template>
<div class="home">code>
<h2>首页</h2>
<button @click="add">加</button>code>
<button @click="subtract">减</button>code>
<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">code>
<h1>{ {num}}</h1>
<button v-on:click="add">++</button>code>
<button @click="add5(5,$event)">+5</button>code>
</div>
<script src="./vue.js">code>
</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">code>
<h2>首页</h2>
<button @click="add">加</button>code>
<button @click="subtract">减</button>code>
<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">code>
<h2>首页</h2>
<button @click="add">加</button>code>
<button @click="subtract">减</button>code>
<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>
6.this.$router和this.$route
this.$router 用来跳转路由 eg： this.$router.push() this.$router.replace
this.$route 用来获取路由参数 eg： this.$route.query
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。