AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue系列——通过moke进行数据模拟

2023-04-20 778
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 通过moke进行数据模拟

使用mock模拟数据

通过脚手架创建基本项目 脚手架详情请参考脚手架这篇安装教学

01、在项目中安装mock

两种安装 命令如下：

npm install mockjs
vue add axios

安装完成后可在node_modules中查看是否安装成了mockjs

e9f3cc9ed64f4d45aa9d98cb8a0a2e68.png

4518e42169e342a7a06f3c3d218dff02.png

02、新建文件夹并在其创建建index.js

a00cf427c3684098a6763fdb20c6312e.png

03、 将mock文件夹的index.js文件在main.js中导入

56b316bd83274969964b81ff8c3823c2.png

04、对index.js添加mock语法

（此处用来测试）详细语法请从官网中获取 Mock.js

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

e18d0591e96f46c5bb1d4ea62bf1e1fc.png

测试完毕后下载elementui插件，从vue ui中下载

c6d96d3f8709433ca2357f4dbd7fb8e8.png

97fbf44615794a6b9f5d2a6a865828aa.png

接下来可以运用element-ui来实现分页数据的请求，添加以及删除等功能

一、删除vue中的原有样式

在index.js中添加四种数据

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|20-60': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id": '@increment()',
        "title": "@ctitle",
        "content": "@cparagraph",
        "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }]
})
// 输出结果
console.log(JSON.stringify(data))

这里打印要先把他转换成字符串格式，并且如果只加了data那么效果如下：

9880e11be91ce58c8cc53e40724fd84.png

特别不容易查看数据，所以需要对其进行排版。像以下这种：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|20-60': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id": '@increment()',
        "title": "@ctitle",
        "content": "@cparagraph",
        "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }]
})
// 输出结果
console.log(JSON.stringify(data,null,4))

效果如下图 所示：

9c4ff74b044e01c7fe8eaa9c904bca4.png

console.log(JSON.stringify(data,null,4))
Mock.mock('/api/get/user','get',(options)=>{
    console.log(options);
    return {
        status: 200,
        message: '获取新闻列表数据成功',
        test:data.list
    }
})

App.vue 

mounted(){
    this.getData()
  },
  methods: {
    getData(){
      this.$axios.get('/api/get/user').then(res=>{
        console.log(res);
      })
    }
  },

7ba9f533581a465ab72b152bd2f2beec.png

接下来可以设置App.vue中的样式了

可从官网中提取所需的样式：element-ui官网

，并加以修改即可

7dc70966e172400c8807618ecb9b2b66.png

在div #app里添加如下代码 

<h3 style="text-align: center">数据展示</h3>
    <!-- 添加 -->
    <el-row :gutter="24">
      <el-col :span="8">
        <el-input v-model="title" placeholder="请输入标题"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-input v-model="content" placeholder="请输入内容"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-button type="primary" @click="handelAdd">添加</el-button></el-col
      >
    </el-row>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

2de6d7c89da948ba8a15d991f06c252b.png

效果如下：

f4f1b5210ba0452391b66fdc07f6cb55.png

接下来就是选择表格

85a7b121804d4c02a1b0f208aa7cd6bd.png

<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
export default {
  name: "app",
  data() {
    return {
      // tableData: [],
      title: "",
      content: "",
      pagenum: 1,
      pagesize: 10,
      total: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
      });
    },
  },
};

添加删除按钮

78f107d12a7e481dae0a0c343b3ba2e6.png

    

<el-table-column label="操作">
          <template v-slot="scope" >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
handleDelete(index, row) {
      console.log(index, row);
    },

2b17e079db274e9da673e94cacc5ce41.png

然后修改头部名称

9582ad57e64e421c9ba2c6aa84982a2e.png

代码如下：

<template>
  <div id="app">
    <h3 style="text-align: center">数据展示</h3>
    <!-- 添加 -->
    <el-row :gutter="24">
      <el-col :span="8"><el-input  v-model="title" placeholder="请输入标题"></el-input></el-col>
      <el-col :span="8"><el-input  v-model="content" placeholder="请输入内容"></el-input></el-col>
      <el-col :span="8">
        <el-button type="primary">添加</el-button>
      </el-col>
    </el-row>
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="name" label="内容" width="180">
        </el-table-column>
        <el-table-column prop="address" label="时间"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      // tableData: [],
      title: "",
      content: "",
      pagenum: 1,
      pagesize: 10,
      total: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>
<style>
</style>

效果如下：

cae690425c844b52aa91c39b41eb903f.png

在index.js中 绑定total

Mock.mock('/api/get/user','get',(options)=>{
    console.log(options);
    return {
        status: 200,
        message: '获取新闻列表数据成功',
        test:data.list,
        total:data.list.length
    }
})

在app.vue中删除数据项并获取数据

getData() {
      this.$axios.get("/api/get/user").then((res) => {
        console.log(res);
        // 渲染到页面中
        this.tableData = res.data.test
        console.log(this.tableData);
      });
    },

效果如下：

2d029e130fd24f27972a07dda73080a7.png

重新设置宽度

 

<el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" width="160">
        </el-table-column>
        <el-table-column prop="content" label="内容" >
        </el-table-column>
        <el-table-column prop="add_time" label="时间" width="180"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

效果如下：af5422db255c42d98b1655959bc89efa.png

接下来做分页

02024df8e5164f81a51215a5e8392d05.png

30b4a770a8974c2ca638f2b03cecadcb.png

<el-pagination style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },

因为分页默认向左边对齐，所以要在标签上添加一个style样式设置为文本居中

461c04302c5d4d789e523ae5c4440aa1.png

所有的页面渲染就已经完成了

接下来进行删除和添加效果

index.js中的对删除进行操作

首先先把分页样式给注释掉，不然控制台会引起错误

1493f85dae3c4d86bc503f2e0d49c8a2.png

4ae4a2826ca049608029e4391d3d9c19.png

// 用正则表达式来写
Mock.mock(/\/api\/delete\/user/,'post',(options)=>{
    console.log(options);
    return{
        status: 200,
        message: '删除成功',
        list:data.list,
    }
})

app.vue部分 

// 删除
    async handleDelete(id) {
      // console.log(index, row);
      // 传一个参数id post就直接传
      // 解构写法
      // const {data,res} = await('/api/get/user',{ id })
      const result = await axios.post('/api/delete/user',{ id })
      console.log(result);
      this.getData()
      // 如果是get请求
/*       const {data,res} = await('/api/get/user',{ 
        params:{
          // id:id
          id
        }
       }) */
    },
/*     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }, */

将删除按钮进行修改：

<template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>

20c002b918944fedb832f020c9988605.png

使用async要把axios引入

38d3a1b1f35d488bacaea62d44cbebea.png

index.js中获取options里的body

Mock.mock(/\/api\/delete\/user/,'post',(options)=>{
    console.log(options);
    // 要转成对象的形式
    // const body = options.body
    const body = JSON.parse(options.body)
    console.log(body);
    // 过滤数据
    return{
        status: 200,
        message: '删除成功',
        list:data.list,
    }
})

01b39c5eff674dd68d0c19eda0653138.png

使用findindex进行复杂数据类型的查找

const index = data.list.findIndex(item=>item.id === body.id);
    data.list.splice(index,1)

d7d3b1f10b784f13b729696330aa34b0.png

效果如下：

c70c49245dda4c939b3e1725d9b3dfb1.gif

当然也可以添加一个弹窗

411e5161b7274020b5d2e10edac8b2b3.png

如何添加？

把里面的代码放到app.vue的方法中

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

并且在删除成功里渲染数据

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        // 把this.getData放到此处
          this.getData();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

效果如下：

859eeb3550d1490a932c217b34bf4dfd.gif

添加操作

app.vue

async handelAdd() {
      if (!this.title || !this.content) {
        alert('请您务必填写标题以及内容信息！');
        return;
      }
      // 可以使用重复的result，其作用域不同
      const result = await axios.post("/api/add/user", {
        // 传入的参数为标签中的标题栏以及内容栏
        title: this.title,
        content: this.content,
      });
      // 重新加载一遍数据
      console.log(result);
      this.getData();
    // 输入完毕后清空内容
      this.title=''
      this.content=''
    },

5d46c849b25a461b8a9821a74f9d45cf.png

加上一个判断条件（如果为空值时，则调出弹窗提醒用户未完善信息）

if (!this.title || !this.content) {
        alert('请您务必填写标题以及内容信息！');
        return;
      }

a24cf4fa7815484d83d9d222ee05e939.png

index.js部分

Mock.mock(/\/api\/add\/user/,'post',(options)=>{
    console.log(options);
    const body = JSON.parse(options.body)
    data.list.unshift(Mock.mock({
           // 这里切记不要添加随机数 ，要把随机的数据给去除换成body.title和body.content
            "id": '@increment()',
            "title": body.title,
            "content": body.content,
            "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }))
    return{
        status: 200,
        message: '添加成功',
        list:data.list,
    }
})

效果如下：

e4bc72c691a742249cff1925dde95e07.gif

分页部分

分页控件

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

分页的方法：

handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.getList();
    },

index.js部分：

8ae40d26c0224f1da4744f86324d4d95.png

这个就不要了

直接在下面写个新的 

// 含有分页的数据列表,有需要接受的参数要使用正则匹配
// /api/get/news?pageindex=1&pagesize=10
Mock.mock(/\/api\/get\/user/, 'get', (options) => {
  console.log(options)
  // 获取传递的参数pageindex
  const pageindex = getQuery(options.url,'pageindex')
  // 获取传递的参数pagesize
  const pagesize = getQuery(options.url,'pagesize')
  // 截取数据的起始位置
  const start = (pageindex-1)*pagesize
  // 截取数据的终点位置
  const end = pageindex*pagesize
  // 计算总页数
  const totalPage = Math.ceil(data.list.length/pagesize)
  // 数据的起始位置：(pageindex-1)*pagesize  数据的结束位置：pageindex*pagesize
  const list = pageindex>totalPage?[]:data.list.slice(start,end)
  return {
    status: 200,
    message: '获取新闻列表成功',
    list: list,
    total: data.list.length
  }
})

参数名可以自己取

4bb0f5aebe754f4793a31b62cba5ac95.png

a3cc8d706de94264b445c63efc7e9c1e.png

7b14578df97743648e814496808c5ad2.png

最后在生命周期内 先运行一下即可：

create() {
    this.getData();
  },

实现效果如下：  

2b2e875931b646d78f095193cd215f73.png

本章中间更变数据后有细微错误，下面代码是为完整代码

vue.app部分：

<template>
  <div id="app">
    <h3 style="text-align: center">数据展示</h3>
    <!-- 添加 -->
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="8"
        ><el-input v-model="title" placeholder="请输入标题"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-input v-model="content" placeholder="请输入内容"></el-input
      ></el-col>
      <el-col :span="8">
        <el-button type="primary" @click="handelAdd">添加</el-button>
      </el-col>
    </el-row>
    <template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="title" label="标题" width="160">
        </el-table-column>
        <el-table-column prop="content" label="内容"> </el-table-column>
        <el-table-column prop="add_time" label="时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      tableData: [],
      title: "",
      content: "",
      pageindex: 1,
      pagesize: 10,
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  create() {
    this.getData();
  },
  methods: {
    getData() {
      // 写分页
      this.$axios
        .get("/api/get/user", {
          params: {
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.list;
          // console.log(this.tableData);
          this.total = res.data.total;
        });
    },
    // 删除
    async handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(index, row);
      // 传一个参数id post就直接传
      // 解构写法
      // const {data,res} = await('/api/get/user',{ id })
      const result = await axios.post("/api/delete/user", { id });
      console.log(result);
      // 如果是get请求
      /*       const {data,res} = await('/api/get/user',{ 
        params:{
          // id:id
          id
        } 
       }) */
    },
    // 添加
    async handelAdd() {
      if (!this.title || !this.content) {
        alert("请您务必填写标题以及内容信息！");
        return;
      }
      // 可以使用重复的result，其作用域不同
      const result = await axios.post("/api/add/user", {
        // 传入的参数为标签中的标题栏以及内容栏
        title: this.title,
        content: this.content,
      });
      // 重新加载一遍数据
      console.log(result);
      this.getData();
      // 输入完毕后清空内容
      this.title = "";
      this.content = "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getData();
      console.log(this.pagesize);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageindex = val;
      this.getData();
    },
  },
};
</script>
<style>
</style>

moke/index.js部分

// 使用 Mock
import Mock from 'mockjs'
const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|20-60': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id": '@increment()',
        "title": "@ctitle",
        "content": "@cparagraph",
        "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }]
})
const getQuery = (url,name)=>{
  const index = url.indexOf('?')
  console.log(index);
  if(index !== -1) {
    const queryStrArr = url.substr(index+1).split('&')
    for(var i=0;i<queryStrArr.length;i++) {
      const itemArr = queryStrArr[i].split('=')
      console.log(itemArr)
      if(itemArr[0] === name) {
        return itemArr[1]
      }
    }
  }
}
/* // 输出结果
// console.log(JSON.stringify(data,null,4))
Mock.mock(/\/api\/get\/user/,'get',(options)=>{
  console.log(options);
  return {
      status: 200,
      message: '获取新闻列表数据成功',
      list:data.list,
      total:data.list.length
  }
}) */
// 含有分页的数据列表,有需要接受的参数要使用正则匹配
// /api/get/news?pageindex=1&pagesize=10
Mock.mock(/\/api\/get\/user/, 'get', (options) => {
  console.log(options)
  // 获取传递的参数pageindex
  const pageindex = getQuery(options.url,'pageindex')
  // 获取传递的参数pagesize
  const pagesize = getQuery(options.url,'pagesize')
  // 截取数据的起始位置
  const start = (pageindex-1)*pagesize
  // 截取数据的终点位置
  const end = pageindex*pagesize
  // 计算总页数
  const totalPage = Math.ceil(data.list.length/pagesize)
  // 数据的起始位置：(pageindex-1)*pagesize  数据的结束位置：pageindex*pagesize
  const list = pageindex>totalPage?[]:data.list.slice(start,end)
  return {
    status: 200,
    message: '获取新闻列表成功',
    list: list,
    total: data.list.length
  }
})
// 删除通过post请求
Mock.mock('/api/delete/user','post',(options)=>{
  console.log(options);
  // 要转成对象的形式
  // const body = options.body
  const body = JSON.parse(options.body)
  console.log(body)
  // 如果每一项的id与body的id相等时，则删除本身一行数据
  const index = data.list.findIndex(item=>item.id === body.id);
  data.list.splice(index,1)
  // 过滤数据
  return{
      status: 200,
      message: '删除成功',
      list:data.list,
  }
})
// 添加
Mock.mock('/api/add/user','post',(options)=>{
    console.log(options);
    const body = JSON.parse(options.body)
    data.list.unshift(Mock.mock({
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            "id": '@increment(1)',
            "title": body.title,
            "content": body.content,
            "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }))
    return{
        status: 200,
        message: '添加成功',
        list:data.list,
    }
})
文章标签：
JavaScript
关键词：
数据VUE.js
vue数据VUE.js
VUE.js数据
vue数据
SouthernWind
目录
相关文章
我是快乐的嘟嘟
|
3天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
57 26
html的七十二变
|
4天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
19 8
html的七十二变
|
4天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
17 7
html的七十二变
|
4天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
16 5
游客ady5kpv352g3u
|
3天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
10 3
html的七十二变
|
5天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
17 5
游客ady5kpv352g3u
|
3天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
12 2
html的七十二变
|
5天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
14 4
游客zi3qmblbcdexu
|
10天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
30 6
游客zi3qmblbcdexu
|
10天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
32 5

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    Vue 3和Element组件库的分页功能实现
  • 3
    Vue $watch监听对象属性，数组内对象属性改变
  • 4
    Vue打包后页面出现空白解决办法（臻享版）
  • 5
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 6
    自制简单的range（Vue）
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    深入vue2.0源码系列:依赖追踪与计算属性的实现
  • 9
    【Vue】day02-Vue基础入门（四）
  • 10
    Vue与React编程式路由导航
  • 1
    前端核心框架Vue指令详解
    38
  • 2
    Vue项目使用ECharts实现图表
    75
  • 3
    如何在vue添加echarts图表
    75
  • 4
    使用Vue+ ECharts进行动态图表展示
    234
  • 5
    Vue引入Echarts图表的使用
    71
  • 6
    探索前端开发框架：React、Angular 和 Vue 的对决(四)
    79
  • 7
    探索前端开发框架：React、Angular 和 Vue 的对决(三)
    73
  • 8
    探索前端开发框架：React、Angular 和 Vue 的对决(二)
    75
  • 9
    探索前端开发框架：React、Angular 和 Vue 的对决(一)
    74
  • 10
    报错：关于Vue项目下载swiper插件时没有dist文件夹的问题
    130

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云OSS设置跨域访问