Vue中数据丢失的问题

最新推荐文章于 2024-05-11 14:36:51 发布

大闸蟹~

最新推荐文章于 2024-05-11 14:36:51 发布

阅读量856

点赞数

分类专栏： Vue 学习文章标签： vue.js

本文链接：https://blog.csdn.net/YCHH1/article/details/126271027

版权

Vue 学习专栏收录该内容

13 篇文章 2 订阅

订阅专栏

webpack.config.js


// 模式
module.exports = {
    // 模式
    mode: "development",

    // 处理文件后缀
    resolve: {
        // vue 文件的入口
        alias: {
            "vue$": "vue/dist/vue.js",
        },
        // 处理文件的后缀
        extensions: ['.js', '.css'],
    },

    // 文件入口
    entry: {
        "01": "./modules/01.js",
        "02": "./modules/02.js",
        "03": "./modules/03.js",
        "04": "./modules/04.js",
        "05": "./modules/05.js"
    },

    // 文件发布
    output: {
        filename: "./[name].js"
    },

    // 模块的编译
    module: {
        // 加载机
        rules: [
            // css
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            // less
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            // scss
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }
}

01 数据丢失的问题.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>{{msg}}</h2>

        <p>
           colors--- {{colors[0]}}---{{colors[1]}}---{{colors[2]}}--- <strong>{{colors[8]}}</strong>
        </p>

        <p>
            对象中的新属性 <strong>{{obj.title}}</strong>
        </p>

        <p>
            未初始化的数据丢失<strong> {{width}}</strong>
        </p>
    </div>


    <script src="./dist/01.js"></script>
    
</body>
</html>

01 .js

import Vue from 'vue';


let app = new Vue({
    el:"#app",
    data:{
        msg:"hello",
        // 数组中的值类型
        colors:['yellow','red','black'],
        obj:{
            age:23
        }
    }
})


setTimeout(()=>{
    // app.msg="ychh",
    // 修改数据中的值  数据丢失
    app.colors[0]="yellowgreen"


    
    // console.log(app);

    // 对象中的新属性  -- 数据丢失
    // app.obj.title="大闸蟹"

    // 未初始化数据丢失
    app.width=300


    console.log(app);


    // 以上方法的解决方式 
    // 第一种定义一个数据不会丢失的数据  这样全局的数据都不会丢失  除非没有的数据会丢失
    

    // 第二种方式 使用  $set 的方式
    app.$set(app.colors,8,"    wadth")

    app.$set(app.obj,'title',"     大闸蟹")

    app.$set(app.width,'     3000')




},2000)