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的话只有单向的绑定，栗子如下：

这样的话，my_style数据发生了改变会更新到这个dom元素上，但是dom元素的操作不会更新my_test数据。
v-model则相反：
首先，v-model一般用于input这类的标签上，这就是一个双向绑定了，dom元素的操作会更新数据，数据的操作也会更新dom元素。

5.关于Vue中export的data：





第二种写法：

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 [email protected]
然后开启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
    }
 }
}