Vue中遇到过的坑

1.在侦听器中无法侦听对象内的属性，这时候可以用计算属性先返回想要侦听的属性，或者用深度侦听 deep。

computed: {
    editor() {
        return this.$refs.TextEditor.quillEditor
    },
    site_id(){
    return this.setForm.site
  },
},
watch:{
    site_id:function(){}    
}

2.这个坑算是axios的，axios在默认的情况下是不带cookies的，要让它带上cookies需要在vue中的main.js进行设置：

axios.defaults.withCredentials=true;

3.vue与Django结合的时候会有一个csrf_token的问题，对于这个问题，解决的办法是先安装Django-cors-headers，并在django中的settings中进行设置：

# 先在APP里面进行添加：
INSTALLED_APPS += 'corsheaders'

# 再在最后追加内容：
APPEND_SLASH = False

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = ()

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)


# * 表示接受所有的头
CORS_ALLOW_HEADERS =  (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'x-file-name',
    'identity',
)

4.Vue中v-bind和v-model的区别：

V-bind的话只有单向的绑定，栗子如下：
<div id="my_test" :style="my_style">这样的话，my_style数据发生了改变会更新到这个dom元素上，但是dom元素的操作不会更新my_test数据。
v-model则相反：
首先，v-model一般用于input这类的标签上，<input v-mode="my_test">这就是一个双向绑定了，dom元素的操作会更新数据，数据的操作也会更新dom元素。

5.关于Vue中export的data：

<template>
    <div id="test">
        {{test}}
    </div>
</template>

<script>
export default {
    name:"test",
    // 注意这里
    data:()=>({
        test:"this is a test !"
    })  
}
</script>

第二种写法：
<template>
    <div id="test">
        {{test}}
    </div>
</template>

<script>
export default {
    name:"test",
    // 注意这里！
    data(){
        return {
            tsest:"this is a test !"
        }
    }
}
</script>

6.关于Vue的跨域

上面django中跨域的方法是通过后端来设置请求头的方式，但在Vue中可以在config中的index.js来配置开发服务器的代理：

路径.jpg

// 更新proxyTable:

// 将Vue默认的host下的/api（http://localhost:8080/api/xxx）代理到 http://localhost:3001/api/xxxx
proxyTable: {
      '/api':{
        target:'http://localhost:3001/api',
        changeOrigin: true,
        // 重写相应的路径
        pathRewrite:{
          '^/api':'^/api'
        }
      }
    },

缩减Vue工程生成的js文件的大小

一般来讲，直接npm run build 生成的文件工程文件都普遍偏大，这时候我们可以通过开启gzip的方式来减小打包后生成的文件大小：
首先安装compression-webpack-plugin这里注意要安装1.1.12版本的才行！: npm i compression-webpack-plugin@1.1.12
然后开启gzip压缩，在Vue-cli生成的config文件夹中index.js进行设置：productionGzip: true,
最后设置webpack.prod.conf.js:

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      // 设置这里的asset为filename
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

Vue中计算属性传参

Vue的计算属性本身是不能传参的，只能通过闭包来实现传参的操作，具体的代码如下：

:data="closure(item, itemName, blablaParams)"

computed: {
 closure () {
   return function (a, b, c) {
        /** do something */
        return data
    }
 }
}

Vue中v-model的坑,循环动态改变一个json将导致这个json中被v-model绑定的元素失去Vue中默认的getter和setter方法，导致无法改变数据。

<template>
    <div id="app">
        <input v-for="(item,key) in test" :key="key" v-model="item.model"/>
    </div>
</template>

<script>
const datas = {
    data: {name:'test1'},
    data2: {name:'test1'},
}
export default {
    name: 'app',
    data() {
        return {
            test: {}
        }
    },
    methods: {
        change() {
            // 这样将导致失去getter和setter方法，导致v-model失效：
            for(let key in datas) {
                this.test[key] = {...datas[key],model: ""}
            }
            // 可以用一个变量来装上面循环生成的数据，再将test一次性赋值成为这个数据：
            let _data = {}
            for(let key in datas) {
                _data[key] = {...datas[key],model: ""}
            }
            this.test = _data
        }
    }
}
</script>