web学习笔记（七十）

最新推荐文章于 2024-06-28 15:40:18 发布

shan33__

最新推荐文章于 2024-06-28 15:40:18 发布

阅读量1.4k

点赞数 47

分类专栏：笔记文章标签：前端学习笔记 javascript vue.js

本文链接：https://blog.csdn.net/shan33__/article/details/139994378

版权

笔记专栏收录该内容

71 篇文章 5 订阅

订阅专栏

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>

6.this.$router和this.$route

this.$router 用来跳转路由 eg： this.$router.push() this.$router.replace

this.$route 用来获取路由参数 eg： this.$route.query

shan33__

关注

47
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
web学习笔记（七十）

如果data不是函数，而直接写一个对象，那么所有组件共用同一个数据了，此时的数据变成了全局变量，任意一个组件修改data中的数据，所有组件都会同步变化，这样的话，组件复用就会出现问题，因为组件复用本质上是复用的标签结构和样式而已，数据肯定不能共享，每个组件实例对象this都需要维护自己内部的数据，保证数据的独立性。vue2是选项式api，所有的响应式数据都要写在data中，并且需要return出去，事件的绑定方法和vue3是一样的，但是需要将声明的方法都写在 methods对象中。
复制链接

扫一扫