10-06￥Vue项目中小总结

1. ref

   尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

   你已经定义了这个 ref 的组件里，你可以使用：

this.$refs.usernameInput

*$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。用于直接操作子组件的“逃生舱”——应该避免在模板或计算属性中访问 $refs。
2.(vue)基本规范

<script>
export default {
    // 组件名称
    name: 'name',
    // 引入组件
    components: {
        xxx
    },
    // 接受数据
    props: {
        xxx
    },
    // 过滤器
     filter: {
        xxx: { xxx }
    },
    // 混入
    mixins: [ xxx ],
    // 组件实例数据
    data() {
        return {
           xxx
        }
    },
    // 计算属性
    computed: {
        xxx
    },
    // 监听属性变化 执行异步或者是开销比较大的操作
    watch: {
       xxx
    },
    //  渲染函数 jsx
    render(h) => {
        xxx
    },
    mounted() {
        //页面初始化方法
    },
    methods: {
        //实例方法集合
    }
}
</script>

将生命周期函数尽量放下面，而将，mixin，data, computed, fliter，components, props等尽量放在上面，以便能够快速读懂组件。

3. 前端搭建的模式选择（多页面模式和单页面模式）

多页面模式：

• 多个完整页面，例如page1.html、page2.html等
• 跳转页面前后，js/css/img等公用文件重新加载
• 页面通过window.location.href = "./index.html"跳转
• 适用于高度追求高度支持搜索引擎的应用
• 转场动画不易实现

单页面模式：

• 由一个初始页面和多个页面模块组成，例如：index.html和page1.htnl.js、page2.html.js等
• js/css/img等公用文件只在加载初始页面时加载，更换页面内容前后无需重新加载
• 通过使用js方法，append/remove或者show/hide等方式来进行页面内容的更换