vue-immutable

A global immutable data plugin for Vue.js

Usage no npm install needed!

<script type="module">
  import vueImmutable from 'https://cdn.skypack.dev/vue-immutable';
</script>

README

vue-immutable

A global immutable data plugin for Vue.js

文档地址

Meaning

在编写 vue 代码的过程中,经常会遇到需要在模板中渲染一些不会改变的变量,由于需要在放到模板中,我们常常把这个变量放到 data 属性中,vue 会对 data 中的数据进行观察,这样便会造成将「数据」转换为「响应式对象」的性能开销,尤其是当这些数据较多且复杂时。因此有必要实现一种模式,既能跳过 vue 的观察机制,又能使变量可以在 vue 模板中被使用,vue-immutable 由此诞生 ,优化 vue 对 immutable 数据的处理,immutable 数据将被全局消费。

Install

使用 npm 安装: npm install vue-immutable

使用 yarn 安装: yarn add vue-immutable

Start

// main.js
import Vue from "vue";
import App from "./App.vue";
import VueImmutable from "vue-immutable";

Vue.use(VueImmutable);

new Vue({
  el: "#app",
  immutable: {
    msg: "hello world"
  },
  components: { App },
  template: "<App/>"
});
// App.vue
<template>
  <div id="app">
    <h1>{{ $immutable.msg }}</h1>
  </div>
</template>

Development Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# package the code
npm run build

# run unit test
npm run test

Changelog

2019.3.14

v0.2.2 修复打包错误

2019.3.13

v0.2.0 数据继承采用引用模式,废弃拷贝模式

2019.3.6

v0.1.4 添加插件配置项 deep

2019.2.4

v0.1.3 实现 immutable 数据继承

2019.2.3

v0.1.2 添加文档

v0.1.0 项目初始化