vue中常碰见的坑_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：

{{test}}

export default {

name:"test",

// 注意这里

data:()=>({

test:"this is a test !"

})

}

第二种写法：

{{test}}

export default {

name:"test",

// 注意这里！

data(){

return {

tsest:"this is a test !"

}

}

}

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方法，导致无法改变数据。

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

}

}

}