在Grails中如何使用Vue.js写前端

整体代码结构

由于 Grails 框架现在并不支持解析 Vue.js的插件, 所以采用如下方式：

Grails项目结构

vbuilder项目结构

其中，assets/vbuilder/目录下放置的是ci/vueSrc编译生成的js文件。
以appDetail.gsp举例，appDetail.gsp中的代码如下所示

而vueSrc/pages/appDetail/中包含 index.js 和 index.vue 两个文件。其中index.js是包含路由设置，而index.vue负责页面UI和业务逻辑。

大家都知道，Vue的代码需要编译成js代码之后，才能在浏览器中生效。所以，修改Vue代码之后，使用webpack打包，刷新页面，才能看到修改之后的页面。但是我们公司开发了一个实时编译Vue代码的工具-vbuilder.这个工具能感知指定目录下的文件变化，一旦文件发生改动，它会重新编译生成JS文件，不需要我手动使用webpack打包。总的来说，Grails与Vue结合的重点的是assets目录，它的整体流程如下所示：

Grails与Vue流程

Vue 工程的代码结构

接下来就是vueSrc工程的代码结构

vueSrc结构

uto-orient/strip%7CimageView2/2/w/1240)

vueSrc下有common,components,node_modules,pages四个目录其中，他们的作用如下所示

目录名	描述
page	一个页面对应一个目录，每个目录下都包括index.js文件
common	包括api.js,config.js,common.js。其中api.js存储后端的URL; config.js存储标题，内容等常量; common.js 是一些普遍常用的函数
components	包含该工程特有的组件库
node_modules	第三方组件库

Vue.js 在项目中遇到的坑

• Vue 中的 data 属性一般是用于数据的初始化，这里需要注意的是，data 中定义的变量a，当该变量 a 的值发生变化时，使用该变量的 html 中。也会发生变化；但是依赖b =a +1 （其中b定义在data）中的b，并不会随着a的变化而变化。
• Vue 中如果父子组件同时需要修改子组件中某个属性的值。这个属性最好存在于props中，当子组件需要修改该值时，通过 emit 方法向父组件发送消息，请求父组件修改该属性的值。
• data 中的属性的初始化不能利用props的属性

export default {
    props: {
            customClass: {
                type:String,
                default: ''
            },
            options: {
                type:Array,
                default: []
            },
            initOption: {
                type:String,
                default: ''
            }
        },
        data: {
            optionVal: this.initOption
        },
}

这样会报错。

props与data

原因是，props的初始化在data初始化之后？

• Vue 中 methods 有正确的调用顺序

函数调用

• Vue 中双向数据渲染需要注意的问题

this.alert = CONFIG.addOrUpdateAppSuccessAlert;
this.alert.show = true

首先CONFIG.addOrUpdateAppSuccessAlert会变成一个新的Vueobject。由于alert.show有双向数据渲染，所以CONFIG.addOrUpdateAppSuccessAlert.show会变成false。而且无法变为true。所以上面正确的写法如下所示

this.alert = JSON.parse(JSON.stringfy(CONFIG.addOrUpdateAppSuccessAlert)) ;

• Vue 初始化需要注意的点

如果jobInfo中没任何定义的话，jobInfo.name是无法和 input 元素进行双向绑定的，至于为什么呢？因为在 Vue 2.0 中 v-model 不再创造没有初始化的属性。所以，无法双向绑定。

v-model初始化

v-model with uninitialized property

• Vue 中监听某个 object 类型的 key 值

data: {
    block: {
        checkbox: {
            active:false
        },
        someotherprop: {
            changeme: 0
        }
    }
},
watch: {
   'block.checkbox.active': function() {
        // checkbox active state has changed
        this.block.someotherprop.changeme = 5;
    } 
}

Vue JS Watching deep nested object